Nowadays applications which are not supporting dark theme have no place on mobile devices, the dark theme is cool and it’s prolonging your battery life, then why not to support it, especially when it’s so easy.

Supporting Dark Theme

with the new one:

and that’s it, as simple as possible.

It can’t be so easy, right?

Hardcoded colors

the first thing which will brake dark theme support are hardcoded colors in the XML files, except the cases when you want to have the same color in both dark and light modes. In general, you should never use hardcoded color values in the XML. Instead, you can use

android:colorBackground

which will have #FFFFFF color in light mode and #000000 in dark mode.

References to the resources

this will make your life way easier, I will talk about theme attributes later 👇, but you can also read a post by Nick Butcher about Common Theme Attributes.

Mixing themes and styles together

So those are the common mistakes that will prevent you from having a nice dark-themed application out of the box.

Perfectus: Dark Theme Implementation

“design” module

Separate Themes from Styles

A theme is a collection of named resources which can be referenced later by styles, layouts etc

In the themes.xml file, we will keep only stuff related to the theming

A style is a collection of view attribute values.

In the styles.xml, we will keep Buttons, Edit Texts, and other widgets styles.

Dark theme resources

Theme attributes

These attributes will be defined in the themes.xml file and will be used in layouts, styles, vectors, and source code, instead of hardcoding colors or dimensions.

For example, in the styles.xml we can use theme attributes like this

Theme

As was mentioned at the beginning of the article to support Dark Theme, it’s enough to use the DayNight theme, of AppComat or MaterialComponents, in this case, you can have one themes.xml file and define your colors and dimensions there, but for better support of the dark theme, I think having separate themes.xml for night mode is better, in this case, you will have more freedom of selecting different colors for dark and light themes.

Light Theme
Dark Theme

Colors

When choosing colors for dark themes try to use colors with tone below 200. Colors with tone above 300 will look really weird and will disturb your users after a few seconds.

Image from material.io/design/color/dark-theme.html

and of course, you need to keep colors for the dark theme in the

values-night/colors.xml

and colors for the light mode in the values folder.

So basically that’s it if everything is done correct your application will look awesome in dark and light modes 🤓

You can checkout branch with dark theme integration from

Please clap and follow if you like my post, comment if you disagree, or think that something can be done different 🤓 always ready to discuss.