Perfectus: Dark Theme
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
To support the dark theme open your styles.xml file and replace the line:
with the new one:
and that’s it, as simple as possible.
It can’t be so easy, right?
After this change, your application will start adjusting its colors to darkish, whenever the user will change the theme, but your application will most probably look not so nice, because of a few reasons…
Hardcoded colors
Does this code look familiar
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:colorBackgroundwhich will have #FFFFFF color in light mode and #000000 in dark mode.
References to the resources
Use theme attributes, instead of writing direct 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
Do you have a styles.xml file with mixed up themes and styles, or even worse you are not using styles at all, everything is hardcoded in each and every XML layout file, this should be fixed, how? Will show later in the post 👇. In the main time, you can read a post by Nick Butcher about Themes and Styles.
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
Now let’s see how I have implemented Dark Theme in the Perfectus app
“design” module
To keep things separated let’s create an Android module called “design”, in this module we will keep everything related to design: colors, theme attributes, themes, styles, etc.
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
In order to better support dark theme, let’s create colors.xml, themes.xml, and styles.xml in the values-night folder, these resources will contain everything related only to dark theming.
Theme attributes
To better support theming we need to create attrs.xml file like this:
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
In the themes.xml we will define a theme for our whole application, of course, we can also define themes for particular activities in the case if you want your sign in activity look greenish and sign out pinkish. Here we will also define theme attributes, which will be used across all application and the benefit is that we will define them in only one place, like this:
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.
Colors
The final step will be to define colors for dark and light themes.
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.
and of course, you need to keep colors for the dark theme in the
values-night/colors.xmland 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.
