How to do Flexible Switching of Day-Night Theme in Android?

Since the Day/Night or Light/Dark theme has become the new normal since Android 10 started rolling out, most of the popular apps like Rocks Player Ultra HD Video have this feature. If you love to try new add-ons on your apps, it’s time to give it a try and make your app future-proof with this feature. 

We are going to describe how to implement day/night themes on your app in the easiest way possible, with AndroidX’s AppCompat library. Before getting started, keep this thing in mind – we strongly recommend AndroidX libraries if you are working on a new project. You can also transfer your current project to Android if you haven’t used it before.

So without any wait, let’s get started…

First of all, import AppCompat from AndroidX with this command –

“implementation 'androidx.appcompat:appcompat:1.1.0-alpha05'”

This AppCompat version will come up with bug fixes and new updates alongside the Day/Night theme. Change the theme and extend the same from Theme.AppCompat.DayNight. 

Go with some coding

Set the theme within Android Application Class and change the existing one while starting up your app. This method will set changes to current activities from v1.1.0-alpha05. But you can also keep it safe in configuration changes without having to call recreate(). 

override fun onCreate() {

    super.onCreate()

    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.getDefaultNightMode())

}

Here are the modes used within the app to choose theme – 

●      To set day/light theme - MODE_NIGHT_NO 

●      To set night/dark theme - MODE_NIGHT_YES

●      To use system theme - MODE_NIGHT_FOLLOW_SYSTEM

●      To switch to dark mode with battery saver enabled on device - MODE_NIGHT_AUTO_BATTERY

●      To set theme as per device time - MODE_NIGHT_AUTO_TIME 

A RadioGroup is there inside an app to switch between various themes – 

private fun initThemeListener(){

       themeGroup.setOnCheckedChangeListener { _, checkedId ->

           when (checkedId) {

               R.id.themeLight -> setTheme(AppCompatDelegate.MODE_NIGHT_NO, THEME_LIGHT)

               R.id.themeDark -> setTheme(AppCompatDelegate.MODE_NIGHT_YES, THEME_DARK)

               R.id.themeBattery -> setTheme(AppCompatDelegate.MODE_NIGHT_AUTO_BATTERY, THEME_BATTERY)

               R.id.themeSystem -> setTheme(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM, THEME_SYSTEM)

           }

       }

   }

   private fun setTheme(themeMode: Int, prefsMode: Int) {

       AppCompatDelegate.setDefaultNightMode(themeMode)

       saveTheme(prefsMode)

   }

Keep in mind that device must have Android 9 Pie to support the system theme. If the device is running an older Android version, you need to remove the option to choose the system theme from the UI. 

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P){

      themeSystem.visibility = View.VISIBLE

    } else {

      themeSystem.visibility = View.GONE

    }

How to check the current theme on the device?

There must be a day or night theme to get the configuration but it is not possible to figure out if it is set manually, battery or the system itself. This way, shared preferences are used to tick the right box and store the theme selected. Here’s the code - 

when (getSavedTheme()) {

      THEME_LIGHT -> themeLight.isChecked = true

      THEME_DARK -> themeDark.isChecked = true

      THEME_SYSTEM -> themeSystem.isChecked = true

      THEME_BATTERY -> themeBattery.isChecked = true

      THEME_UNDEFINED -> {

        when (resources.configuration.uiMode.and(Configuration.UI_MODE_NIGHT_MASK)) {

          Configuration.UI_MODE_NIGHT_NO -> themeLight.isChecked = true

          Configuration.UI_MODE_NIGHT_YES -> themeDark.isChecked = true

          Configuration.UI_MODE_NIGHT_UNDEFINED -> themeLight.isChecked = true

        }

      }

    }

When the user runs the app just after downloading it, it will be in undefined state in shared preferences. This way, we should check if configuration has a theme. If not, the light theme will be set as default.

Do you want more control?

You can create a “values-night” folder to use custom colors for light/dark theme (for example, light blue for light and dark blue for dark theme) and override colors file. Use attributes and override styles.xml if you want to do so. The app will use colors only from “values-night” when the user chooses a dark theme. There are also alternate resources available for you to provide for night themes, such as, “drawable-night”. 

Bottom Line

It is not that difficult to implement a day/night theme on an app, especially when you are using the AppCompat library. You can also have more control on styles and colors by doing some extra preparation. You should do the planning and implementation the right way in your project. If you too did the same on any of your projects, feel free to let us know.