Dark Mode in iOS 13 and Android 10 [Cobalt Matters]

Requirements

1. Build and release with Xcode 11.
2. Run on an iOS 13 device.

Once the user switches the phone to dark mode (in Settings), some native UI features such as the Status Bar, Navigation Bar, Tabs Bar and more, will automatically be redrawn. However, the rest of the App UI will remain the same. It is the developer’s responsibility to choose the correct style to make its app look great in dark mode.

The apps support dark mode by default. It’s also possible to force one appearance over the other by adding a new key UIUserInterfaceStyle in Info.plist file and set its value to Light/Dark.

We have to take care of four appearances:

1. Default
2. Default High Contrast
3. Dark Mode
4. Dark Mode High Contrast

Handle Dynamic Colors

• System Colors

Until iOS 12, we used UIColor – simple colors like .red, .yellow, etc. These colours are static, which means that their tint never changes.

By using the System Colors (e.g. UIColor.systemBlue instead of UIColor.Blue), the interface will automatically pick the right tint for the current system preference.

To obtain the final color, dynamic colors get resolved using a UITraitCollection. For system defined colors this happens automatically, but, we can also declare our own dynamic colors programmatically.

UITraitCollection – a collection of properties, computed at run time, design to provide information like the current User Interface Style (light \ dark), User Interface Idiom (iPhone, iPad, etc), etc.

• Custom Colors

Define one colour for each mode:

• Define Colors with an Asset Catalog

The same rules apply to colors created from Assets.

Prepare images from Asset Catalog for Dark/Light Mode

In the Image Set tab from Assets, you can enable a different set of images for Light and Dark modes.

Test Dark Mode in Storyboard

In Xcode 11, you can test dark and light appearances as a preview in Storyboard.

In order to enable Dark Theme, Android apps must target Android 10. The official documentation provides a useful guide for migrating apps to Android 10.

Implementing Android Dark Theme The Easy Way

Android supports Force Dark, which is an easy way for developers to implement dark mode in their apps. Force Dark analyses each view of the app and applies a dark theme automatically before it’s drawn to the screen.

To enable Force Dark, simply add the following item to your app’s theme:

Implementing Android Dark Theme The Right Way

In order to fully support Dark Theme, the app’s theme must inherit from a DayNight theme:

This enables the usage of specific resource folders like drawable-night and values-night. These resources will be automatically used when Dark Theme is enabled, and they allow detailed changes to be implemented.

Dark mode delivers a new flavor to the apps making them fit well with users that like to have more pixels off on today’s OLED screens. This is crucial for saving energy to increase battery life, so it’s a win for everybody.

You’re in the right place. Here at Cobalt Sign, we’re building apps for iOS and Android since 2011 and we love every part of it. We always stay up to date with the latest technologies and we try to share as much knowledge as we can with you.

So, if you want to learn app development, make sure to reach out to us and let us know topics you’d love to read about.. Periodically, we will choose from the topics you propose and we will write about them.