How to implement a dark theme on Android
Android 10 adds a system-wide dark theme, which preserves battery power for devices with OLED screens, reduces eye strain, and facilitates use in low-light environments.
These guidelines will show you how to implement a dark theme on Android, even on earlier versions of the platform.
1. Declare dependencies
Add the following dependencies to your project:
2. Inherit from a DayNight theme
The easiest way to support a dark theme is to inherit from a DayNight theme such as Theme.AppCompat.DayNight.
Basically, a DayNight theme is composed of a Light theme in the values directory and a Dark theme in the values-night directory.
For example, declare a Theme.MaterialComponents.DayNight.NoActionBar.Bridge:
values/themes.xml
values-night/themes.xml
And then, declare your AppTheme:
values/themes.xml
values/colors.xml
values-night/colors.xml
3. Use theme attributes for colors
When writing your layouts, use theme attributes or night-qualified resources instead of hard-coded colors to ensure that they display suitable colors in a Light theme and in a Dark theme.
For example, when you use a FloatingActionButton, the default backgroundTint is ?attr/colorAccent so the tint should be ?android:attr/textColorPrimaryInverse to ensure that the contrast ratio between the icon and its background is eligible:
In a Light theme, it will display a #ffffffff icon on a #ff009688 background.
In a Dark theme, it will display a #de000000 icon on a #ff80cbc4 background.
4. Allow users to change the app’s theme
Your app should let the user switch between themes, which map directly to one of the following modes:
Light-AppCompatDelegate.MODE_NIGHT_NODark-AppCompatDelegate.MODE_NIGHT_YESSystem defaulton Android 10 and higher -AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEMSet by Battery Saveron Android 9 or earlier -AppCompatDelegate.MODE_NIGHT_AUTO_BATTERY
Use AppCompatDelegate.setDefaultNightMode to switch the theme for all components in your app. Please note that it is not saved when the app is killed so you should use Settings to save the user’s choice.
For example, use the following code in your Activity to change the night mode:
And then, use the following code in your Application to restore the night mode:
5. Run your app
That’s it, you are ready to run your app and enjoy a dark theme!
