At Google I/O and Apple WWDC 2019, both Android 10 and iOS 13 announced support for the Dark Theme and apis for developers to adapt to it.

So, why do we need dark Mode? What are the benefits of Dark Mode? How can Android developers adapt to dark Mode? Today’s article will tell you that.

Why do we need a Dark Theme?

Dark-themed apps are ubiquitous, but this is the first time Android and iOS have supported dark mode at the system level. Maybe it’s the voice of the user or the push of the industry, but thanks to progress and feedback, dark Mode is coming to your phone and mine.

The image above, taken from the Android official documentation, suggests three advantages of a Dark Theme:

  1. Can help us save more electricity

  2. Improves visibility for users with amblyopia and strong light sensitivity

  3. Make it easier for everyone to use equipment in low-light environments

This is thanks to the development of OLED screens, which, unlike LCDS, are self-luminous, emitting red, green and blue light from each pixel, while LCDS emit different light through their backlight layer through a colored film. In this way, IN dark mode, OLED has an inherent advantage. It only needs to turn off the display of black area to achieve the pure black effect, while the BACKlight layer of LCD can only emit white light, so when black is displayed, some light will still pass through the color film, which can not achieve the pure black effect, but can only achieve the relatively black effect.

So, on today’s OLED phones, switching to dark mode drastically reduces battery consumption. For more details on how it works and its benefits, please read the article from the official account of the Institute of Physics of the Chinese Academy of Sciences.

Do you prefer “white board” or “white board”?

Add dark Mode to your Android App

Adaptation can be roughly divided into three parts:

  1. ADAPTS background, text, and ICONS within the app

  2. ADAPTS interfaces that are displayed on the device but not directly controlled, such as notifications and desktop components

  3. Provide the user with the option to switch themes within the application

There are also three adaptation methods: automatic adaptation, custom adaptation, and adaptation using Material Design Components. For convenience, I write an example code here, which looks like this before adaptation is started.

Automatic adaptation Force Dark

Android 10 offers Force Dark. This feature allows developers to quickly implement dark themed backgrounds by adding the line android:forceDarkAllowed=”true” to the app theme in style.xml.

If your app has a light themed background, Force Dark analyzes each view of your app and automatically applies a Dark themed background before the corresponding view is displayed on the screen. Of course, the system does all the adaptation itself, so you as the developer need to do detailed testing to make sure there are no errors.

As you can see from the screenshot above, auto-adaptation works very well, and there is an article explaining how auto-adaptation works in detail, which is addressed at the end.

Android Q Dark Mode (Dark Mode) source analysis

Custom adaptation

The key to custom adaptation is to avoid all hard-coded color values, create light and night colors, and define the same name to display different colors in different modes.

1. Ensure that the theme used by the current App inherits from AppCompat or MaterialComponents, and change the previous default Light theme to DayNight

2. Define colors for Dark Mode

After creating, we will have two colors files under values, and the project structure is as shown in the figure below

3. Match the color values of the same name in different modes as required

It is recommended to use the scene meaning of the color itself. For example, colorBackground in the figure above indicates the background color, and colorOnError indicates the display color of the text on the error status. Where the control requires a color, use it directly via @color/colorXXX

The custom fit is perfectly able to achieve any desired effect, and I’ve made some minor adjustments to the status bar, error colors, and emphasis colors compared to the automatic fit.

Material Design Components are used for adaptation

Material Design Components not only include a wide variety of Components, but also improve the Material Design specification, and more importantly, the MD Design specification.

Above is the website of Material Design. In the Design overview, various specifications are detailed, such as how the color system should be designed, the principles and specifications of shadows, the specifications of fonts, how ICONS should be selected, how interaction effects should be designed, and so on.

Personally, I like Material Design very much. Later, I plan to introduce in detail what Material Design is like on this official account. I believe that many people know about Material Design but have really read its documents. And a serious understanding of its design principles, should be very few people.

Therefore, it is not the use of Material Design components that means that your App complies with the Design specifications of Material Design. Not to mention, people who have never read the specifications say that Material Design is anti-human.

In the Design of the color system on the Material Design website, it specially explains how to Design the Dark theme. The reason why it is called Dark theme is that all adaptations are carried out around the theme. In the custom adaptation in the previous section, we simply did it with colors.

Material Design Components has 12 different scene color properties built in. They are main emphasis color, secondary emphasis color, background color, surface color, error color, and font and icon color (starting with on).

Therefore, when we use Material Design Components for adaptation, we need to define two themes, representing light and night respectively. By defining the color attributes of the same scene meaning in the two themes respectively, we can realize the switching of dark mode. The previous part of custom adaptation is to define a theme and switch between the two colors of light and night in the same theme by controlling them.

Compared with the custom adaptation and the use of Material Design Components, the adaptation is more standardized from the perspective of Design. At the same time, the different use scenarios of theme, attr and style are also more clearly distinguished. The theme is used to regulate the properties, and the color is not directly operated in the control. Instead, you manipulate colors through properties, which have a clear sense of the scene.

For colors, you only need to define one. It is recommended to use the name for the color itself.

Above are the two themes I defined for light and night respectively.

Did you notice that we don’t have to manually define our textColor here, because as I said, Material Design Components have 12 colors built in, and our TextView is sitting on top of our CardView, The default color for our CardView is going to be colorSurface in our theme, and the default color for our TextView is colorOnSurface, so all we need to do is define a property in our theme to indicate the color, and that’s the good thing about doing it by property, The premise, of course, is that developers must be familiar with the Material Design Components color specification.

Switch the theme

So far we’ve seen how to adapt the dark mode, and once we’ve done that, we need to give the user the option to switch themes at runtime.

Usually you can give the user the option to toggle in the Settings. The toggle code is simple, with delegates.localnightMode setting the current mode.

It should be noted that switching logic into effect only at run time, when we restart the App would be consistent with the current system setup mode, when after the user to perform the switching logic, so we need to save the user’s behavior, the next time to restart the App, to restore the user before switching logic.

Custom switching logic

When we set delegate.localnightMode, the system will automatically recreate the Activity. If you don’t want to recreate it, You can specify Android :configChanges=”uiMode” in the corresponding Activity in the manifest and override the onConfigurationChanged() method to handle the switch logic yourself.

So far all about Android App Dark Mode adaptation content is introduced here, about more Dark Mode data and demo warehouse in this article, pay attention to this public number [Android | Kotlin] reply [Dark] can get all content.

Thank you for watching, if it is useful to you, please click a good look, share and forward this article, it will be of great help to me, thank you!