Night Mode Support for Android 10 Applications

Android 10 (API level 29) and higher versions of Android OS have added an option of toggling between dark/night & light/day mode by a quick change in display settings themes. The night mode enhances usability and readability of your app by changing the typical white flashy background. Let’s get started with our tutorials:

How to enable Night Mode on Android 10 (API level 29) or higher?

1. Go to Settings -> Display -> Theme & enable the Dark theme.
2. Quick Settings tile to switch themes from the notification tray.
3. On Pixel devices, while you select the Battery Saver mode it enables Dark theme instantly.
   
   

Advantages of the night mode:

• Saves battery
• Dark Mode is applied to Android UI as well as applications installed on device
• Make clear visibility for users with low vision
• Amazing look & feel

How to make Apps compatible with Dark Modes to Match the Android OS?

Android introduced Theme.AppCompat.DayNight in support library 23.2.0. Using this theme, we can toggle between the light and dark mode of application.

1. Set your application theme (res/values/styles.xml) to inherit from a DayNight theme.

<style name="AppTheme" parent="Theme.AppCompat.DayNight">

You can also use MaterialComponents' dark theming:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">

2. To set the DayNight theme and following line inside method

AppCompatDelegate.setDefaultNightMode()

Following are the arguments allowed in the above method:

• MODE_NIGHT_YES – Enables night mode manually.
• MODE_NIGHT_NO – Disables night mode manually.
• MODE_NIGHT_FOLLOW_SYSTEM – This is a default argument. If we do not pass any argument the system will check date/time from system settings & enables the dark mode accordingly.
• MODE_NIGHT_AUTO – If the Location permission is enabled then it takes time from location API and based on that it enables the dark mode. & if location permission is disable then it takes system time.

For Example:

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);



3. Run your test application 'Hello World' You find that the TextView changes its color to white in the night mode. This is since the TextView implicitly contains the default style named ?attr/colorPrimary that toggles the color depending onthe light/dark app theme.

How to use custom theme & fonts for day & night mode?

• To set different colors and drawables please create separate folders for the resources.
• We can put day theme resources inside the default directory while for night theme resources create new folders with names appended with -night. Hence create values-night and drawable-night folders in your project.
• Name of all resources like drawable filename, colors, style must be the same in both the directories.
  • If you have only one directory, then same style will be applied for both themes.
    
    
    
    

Force Dark

Android 10 also provides Force Dark mode feature, which enables dark theme without explicitly setting a DayNight theme

Developer sets Force Dark by adding android:forceDarkAllowed="true" in the activity's theme.

Best Practices

• Use system templates for notifications. Thus, System automatically manages UI based on current mode.
• Custom notifications, widgets, launch screens, custom view & custom dialogs
  • Make sure you have tested all notifications both in dark & light modes.
  • Use light colors for dark mode.
  • Use appropriate theme attribute instead of hardcoded colors for background, text colors, drawable icons (which is in static color)
• When we change application theme it triggers a uiMode configuration change and activities will be recreated automatically at same time. So If you want to handle this configuration change like delay you can manage it by calling onConfigurationChanged()