Let's Make Our Experience Dark Mode Compatible
If you’ve been adding colors to your layout, you may have noticed the nomenclature of our various preset colour options such as "Primary Label".
And you’ve probably also seen settings for Universal, and then Light vs Dark.
These relate to making our design compatible with Dark mode.
This is crucial if our core app product has introduced Dark Mode compatibility, and we don’t want things to be jarring when the user launches our Judo experience.
FYI In Judo we design the same file to be compatible with Light and Dark mode, so there’s no need to duplicate our Judo file at all. Everything we need for Light/Dark mode compatibility is contained within the same .judo file.
Light Mode Always
Until you are ready to make your experience dark mode compatible, it's highly recommended to make all your experiences launch in Light mode only, otherwise the default setting is Auto to follow device settings. This is to avoid any missed images or text elements that may have dark mode compatibility but you weren't aware they did, which could create an experience that is part compatible and part not.
Note that by default, a new Screen has a background of "Primary Fill" - not white, and by default the color of a new text element is "Primary Label", not black, which is why Light Always is recommended.
We can change this setting from the Document Inspector.
Dark Mode Colors
Once we are ready to make an experience that's Dark Mode compatible, the first place we start is with our Colors.
We have two methods for Dark Mode colors:
- The first is two use the Dynamic System Colors that are available from the various dropdown you've seen such as Text Colors & Fill Colors. These are all designed for Dark Mode already.
- The second is to customize any custom Document Colors we may have created
Dynamic System Colors
We may have already noticed the various dropdown options available for Colors such as Text Colors, Fill Colors and System Grays. These are special sets of Dynamic System Colors designed by Apple in conjunction with their Human Interface Guidelines. These Color sets are aimed to convey their purpose, rather than their appearance or color values.
And best of all, these are completely compliant with Light and Dark mode already.
Check out how these colors change from Light Mode to Dark Mode:
Our second method is to create a custom Document Color that has a second color specified for Dark Mode.
We edit a Document Color we've made earlier in the Colors Lesson, and change the setting from Universal to Light vs Dark. Now we can choose a different color for Dark Mode, and hit save.
Dark Mode Images
We can also specify a different image for when our experience is in Dark Mode.
In our Inspector Panel for our image, instead of Universal, choose Light vs Dark.
Now we can specify a different image for when the users device is in Dark Mode.
Dark Mode Preview Mode
Once we've added some Dark Mode Colors and Images, we can preview what our experience will look like in Dark Mode.
From the Top Menu, select View > Dark Mode. We are now previewing this experience in Dark Mode.
We can also add a Dark Mode Preview icon to our Toolbar, as covered in the Where To Begin Lesson.