How to implement a dark theme on Android

Kamal Faraj
Jan 17 · 3 min read
Illustration from idean.com

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.

FloatingActionButton in a light theme

In a Dark theme, it will display a #de000000 icon on a #ff80cbc4 background.

FloatingActionButton in a dark theme

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:

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!


Sample

For a complete example, check out my sample on GitHub.

Ideas by Idean

A collaborative collection of stories and musings from us…

Kamal Faraj

Written by

Senior Software Engineer & Team Manager at Idean France

Ideas by Idean

A collaborative collection of stories and musings from us, a global design studio

More From Medium

More from Ideas by Idean

More from Ideas by Idean

More from Ideas by Idean

What is Digital Product in 2019?

More from Ideas by Idean

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade