Implementation of Android DayNight Theme: Night Mode Made Easy

Learn how to effortlessly integrate a night mode for your app using the Android DayNight Theme. From implementing the theme to adjusting resources for day and night modes, discover step-by-step how to enhance user experience. Let our tutorial guide you through the simple implementation of night mode and optimize your app for comfortable use in all lighting conditions.

The Android DayNight Theme

With the Android DayNight Theme introduced in Support Library 23.2.0, we can switch between light and dark modes in our application. This theme enhances readability and user-friendliness of your application during nighttime by replacing the white, glaring background with a darker one. Many reader apps have already implemented this theme. Let's start the implementation by creating a new Android Studio project with an empty activity.

Adding the Theme to our styles.xml

<style name="AppTheme" parent="Theme.AppCompat.DayNight">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

To set the DayNight theme in our application, we use the AppCompatDelegate.setDefaultNightMode() method. The following arguments are allowed in the mentioned method:

• MODE_NIGHT_YES – Manually activates night mode.
• MODE_NIGHT_NO – Manually deactivates night mode.
• MODE_NIGHT_FOLLOW_SYSTEM – Uses system settings to determine the time of day and adjusts night mode accordingly. This is the default argument.
• MODE_NIGHT_AUTO – Attempts to automatically detect the time using device location APIs. If runtime permission for location services is not granted, system time is used.

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES); // For night mode theme
//AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO); // For day mode theme

setContentView(R.layout.activity_main);
}

The theme should always be set before calling the setContentView method.

What is AppCompatDelegate?

An AppCompatDelegate is a class that represents a delegate you can use to extend AppCompat support to any activities. Let's see how our activity view looks when day and night modes are switched consecutively. The TextView automatically changes its color to white in night mode. This is because the TextView implicitly includes the default style named: ?attr/colorPrimary, which toggles the color based on light/dark app theme. Setting a custom color @color/red on the TextView will not change it between day and night modes. The text color of the toolbar in day mode is black. How can you set it to white in styles.xml itself?

<style name="AppTheme" parent="Theme.AppCompat.DayNight">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:textColorPrimary">@android:color/white</item>
<item name="android:textColorSecondary">@android:color/white</item>
</style>

To retrieve the current night mode type, we use the AppCompatDelegate.getDefaultNightMode() method, which returns an integer for the types discussed earlier. After gaining a basic understanding, let's create an application that:

• Adapts resources and styles in day/night modes.
• Toggles the DayNight theme from the user interface.
• See how various UI widgets look in night mode.

Android Night Mode Project Structure

Android DayNight Theme Sample Code

// Code for activity_main.xml

• We have set a custom text color and a drawable on the ImageView.
• To set different colors and drawables for day and night themes, we need to create separate directories for resources.
• Day mode resources are located in the default directory.
• Night mode resources are located in directories with names ending in -night.
• Therefore, in the project, we have created directories values-night and drawable-night.
• The filename of the drawable, colors, and style names must be identical in both directories for the resources you want to switch in the DayNight theme.
• If the above items are defined in only one of the directories, the same will be used in both day and night themes.

// Code for styles.xml in values folder

// Code for styles.xml in values-night folder

The styles defined above are used to customize the default DayNight theme. The corresponding items for colors.xml are defined as follows.

Code for MainActivity.java Class

// Code for MainActivity.java

In the above code, we use a switch to toggle between day and night mode themes in our application. We save the current mode in a SharedPreferences object. WHY? The theme of an activity can only be set once. Therefore, when the switch is toggled, we need to save the new mode in a SharedPreferences object.