Dark Theme: A heavily requested feature

As a coder, we are using dark theme ide’s but how to implement the same in our app is something we are going to learn in this blog.

Dark Theme is one of Android Q’s new features, revealed at Google IO 2019.

Dark theme in simple terms is a low-light UI that displays mostly dark surfaces as per the material design guidelines, a contrast of your material theme with dark background colors and light foreground colors.

So let’s start coding

1. Declare dependencies

Add the following dependencies to your project:

implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'com.google.android.material:material:1.0.0'

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 the 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

<style name="Theme.MaterialComponents.DayNight.NoActionBar.Bridge" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge" />

values-night/themes.xml

<style name="Theme.MaterialComponents.DayNight.NoActionBar.Bridge" parent="Theme.MaterialComponents.NoActionBar.Bridge" />

And then, declare your AppTheme:

values/themes.xml

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar.Bridge">
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">@color/accent</item>
</style>

values/colors.xml

<color name="primary">#fff5f5f5</color>
<color name="primary_dark">#ff757575</color>
<color name="accent">#ff009688</color>

values-night/colors.xml

<color name="primary">#ff212121</color>
<color name="primary_dark">#ff000000</color>
<color name="accent">#ff80cbc4</color>

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:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        style="@style/Widget.MaterialComponents.FloatingActionButton"
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/margin"
        android:src="@drawable/ic_mode_night_default_black_24dp"
        app:tint="?android:attr/textColorPrimaryInverse" />

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:

• Light - AppCompatDelegate.MODE_NIGHT_NO
• Dark - AppCompatDelegate.MODE_NIGHT_YES
• System default on Android 10 and higher - AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM
• Set by Battery Saver on 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:

val prefs = PreferenceManager.getDefaultSharedPreferences(this)
prefs.edit().putInt(Settings.NIGHT_MODE, mode).apply()
AppCompatDelegate.setDefaultNightMode(mode)

And then, use the following code in your Application to restore the night mode:

val prefs = PreferenceManager.getDefaultSharedPreferences(this)
val mode = prefs.getInt(Settings.NIGHT_MODE, Settings.MODE_NIGHT_DEFAULT)
AppCompatDelegate.setDefaultNightMode(mode)

5. Run your app

Ta-da!! your app theme feature is ready. Keep Coding!!