Dark Theme on Android: What & How (technical and functional overview)
As mentioned in the previous article, Dark Theme is one of Android Q’s new features, revealed at Google IO 2019. Today, I’m going to explain how offering this option to your end-users can benefit your app, what are your options when designing this support, as well as the technical details on how to implement it.
To start off, Dark Theme is the possibility of having an alternative theme to your applications, for darker environments — such as nighttime — as a system-wide setting. Users just have to flip the switch in the device’s settings and the OS (home screen, default apps) will now use a dark theme. Third-party applications that support it will also switch to their own implementation of the dark theme, while third-party apps that do not, will remain with their default color scheme. Dark Theme can always be on — until the user disables it — or simply during a specific time slot every day, like nighttime.
Dark Theme will only be available from Android Q, but you can already design a working dark theme for your apps with the DayNight themes (works back to Android 4/API 14, thanks to AppCompat), by using the ‘-night’ resource qualifier. The difference with Dark Theme is that DayNight is app-specific, not system-wide. It is either manually activated by the user or automatically set when battery saver is on. More on this, here.
For design and development, you have 3 options:
A. No Dark Theme Support
There is nothing simpler, you have absolutely nothing to do. By default, no application will have Dark Theme on Android Q. Which means if a user switches their phone to Dark, any application not handling it will stay the same.
This, of course, is not recommended by Google. Indeed, imagine the user goes into Dark mode and all of the applications are darkened, except yours. Your app will definitely stand out, but not for the right reasons.
B. Let the device create your app’s dark theme on its own
Example: App with default theme on the left, app with Force Dark applied on the right.
To let the device create your app’s dark theme, you need a new feature called Force Dark.
It runs at rendering time and looks at the views to figure out which ones should be inverted in order to run dark. It modifies colors of backgrounds, texts, custom views and vector drawables.
It’s an opt-in feature. To enable it, you just need to set the toggle in your app’s theme, as follows:
One thing to keep in mind is that Force Dark is not optimal and not meant to be a final dark theme. It should be used as a temporary transition, to give you time to polish your app’s custom theme.
[NB: If you feel like Force Dark’s automatic adaptation is unsatisfactory by causing reading issues or by degrading the visuals of your app, you can disable it for specific views in their layout file by adding android:forceDarkAllowed=”false” ]
C. Customize your own dark theme
Finally, the best way to handle Dark Theme is to do it yourself. If you look at the example above, Force Dark did a good job with its own Dark Theme but several areas could be improved. Like the white depth bars on the left, which are too bright compared to the rest of the UI; there is not enough contrast between the text and the background, and lastly, that blue color is not cutting it.
To create your own Dark Theme, you need to use the -night resource qualifier. For example, the light version of your colors are in res/values/colors.xml. So if you want to define a night version for them, redefine the colors in res/values-night/colors.xml.
The -night qualifier works for every type of resource.
Android will pick the right resource definition at runtime, depending on the value of the Dark Theme setting.
Let’s say you want to make a dark version of an interactive map using the Google Maps SDK, just create 2 configuration files as follows:
res/raw for the light configuration, res/raw-night for the dark one
When it comes to images, Android can only invert vector drawables using color resources. If you need to adapt any images (jpg, png, etc) for your dark theme, you can put their dark versions in your res/drawable-night folder. Or, better yet, add a tint to your images. That way, the images themselves won’t be inverted but the tint will be affected by the theme change.
If you need help or a bit of inspiration to create the dark version of your applications, Google has a session for you:
How to Design a Dark Theme Using Material (Google I/O’19)
Thank you for reading. I hope this has helped you understand Dark Theme (better)!
Next up, What’s new in notifications, location and gesture navigation!
