WatchKit: Customizing the Global Tint

At yesterday’s WatchKit Workshop (you can view the presentations here) @benmorrow mentioned an important customization for the Short-Look Notification:

notification_short_look_shot_2x

The interface for the Short-Look notification cannot be customized directly, of course, but it is populated based on the specifications from your Watch App. The App Icon, App name, and the Title string from notification are pretty obvious customizations (this is the standard stuff in the Watch App). But did you know that the Text Color of the App Name is populated based on your Watch App’s Global Tint color?

I highly recommend making sure to set the Global Tint, since the default Dark Gray color is pretty ugly!

Default Global Tint

To change the Global Tint, go to your Watch App’s Interface.storyboard, select any element on the Storyboard, go to the File Inspector on the Utilities right-hand-side pane, and you’ll change the color in the Global Tint option!

Interface_storyboard_—_Edited

The Global Tint also controls the Text Color of the Title on your Interface Controller:

Interesting UI fact in case you didn’t notice. On the Interface Controller that comes after the Table (the detail aka “More Minions” controller), the Title shows up right next to the Back Button. From iOS, we’re used to that signifying the title of the Previous View Controller on the Navigation Stack, but on the Watch, it’s just where the Title goes (since there’s no Navigation Bar).

Minion Detail

Enjoy the article? Join over 14,500+ Swift developers and enthusiasts who get my weekly updates.