Dark Theme Dev @ Wynk| Wynk Android Stories

Light & Dark Mode in Wynk Music

We at Wynk, built the Dark theme for our beloved Wynk Music application. That gave us a huge appreciation from our customers. So as a token of thanks, I would like to express my gratitude towards my developer community. I would like to go ahead and share with you in a nutshell on how to implement a Dark Theme in your app.

Dark Theme — The Day-Night functionality of AppCompat provides developers with the flexibility of having both dark and light themes in their applications. Apart from providing a better user experience, this also helps in conserving the device’s battery.

1.The first and the foremost thing is having a consistent design language across the application. All your UI components should have centralized styles and their specifications like the color, string values and sizes should not be hard coded in the respective XML files. We, as a prerequisite for Dark theme, streamlined all the texts of our application by making different types of styles to be used throughout the app, making it easier for us to build the Dark Theme and achieving the goal to having a consistent design language throughout the application.

<style name="BaseStyle">
    <item name="android:textSize">@dimen/font_medium</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textColor">@color/primary_text_color</item>
    <item name="fontType">regular</item>
</style>

<style name="BaseStyle.Headline">
    <item name="android:textSize">@dimen/font_2x_large</item>
    <item name="fontType">bold</item>
</style>

BaseStyle serves as the base style for all the types of texts that would be used throughout the application. This could easily be inherited for making any customization in the size, style, color, etc. The Headline inherits the BaseStyle by customizing the text size and the font type.

2. Second step would be to have custom resources for Dark Theme counterpart. You can create a resource directories such as values-night, drawable-night under the res folder. All attributes and drawables for Dark Theme would go under these newly created directories.

Folder Structure for “night” resources

3. Now we are ready to set up the Theme for our application. You can choose any theme with day-night capability as your base theme. I have used Materials theme for your reference . You can also use AppCompat.

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

<!-- Customize your theme. -->

</style>

Set CustomTheme as your application’s theme and we are good to go. Now let’s get to the climax!

You can change the mode of your app’s theme with the help of AppCompat.

AppCompatDelegate.setDefaultNightMode(mode)

Here, mode can take a lot of values. But, I will be explaining the one’s you’re probably going to use -

AppCompatDelegate.MODE_NIGHT_YES - As the name suggests, this would set the mode of your theme to Dark/Night Mode ON. It will use the resources present in values-night or drawable-night folders, if any.

AppCompatDelegate.MODE_NIGHT_NO - This would set the mode of your theme to Light/Night Mode OFF.

AppCompatDelegate.MODE_NIGHT_AUTO - This one is interesting. Here, for Android 9 and below the dark mode would be triggered only when the device is in battery saver mode. Else it will use the light mode. And for Android 10 and above, it would set the theme of your application in accordance with your system theme.

That’s it! That was easy? Right? Now let me throw in an extra bonus something for you.

There would be multiple instances when you would dynamically want to know which theme is currently applied to the application. When explicitly the dark/light mode has been applied, it’s straight forward but this becomes a challenge when the user has set the System Default theme(Android 10 & above) or has the power saver enabled(Android 9 & below). Don’t worry! I will help you out there too. This code snippet will help you understand it even further.

fun isNightModeActive(context: Context): Boolean {
   //Get default night mode from AppCompat   
    val defaultNightMode = AppCompatDelegate.getDefaultNightMode()
    if (defaultNightMode == AppCompatDelegate.MODE_NIGHT_YES) {
        return true
    }
    if (defaultNightMode == AppCompatDelegate.MODE_NIGHT_NO) {
        return false
    }
    //For Android 10 and above
    if (Build.VERSION.SDK_INT > Build.VERSION_CODES.P) {
        val currentNightMode: Int = (context.getResources().getConfiguration().uiMode
                and Configuration.UI_MODE_NIGHT_MASK)
        when (currentNightMode) {
            Configuration.UI_MODE_NIGHT_NO -> return false
            Configuration.UI_MODE_NIGHT_YES -> return true
            Configuration.UI_MODE_NIGHT_UNDEFINED -> return false
        }
    }
    //For Rest of Android Devices
    else {
        val pm = context.getSystemService(Context.POWER_SERVICE) as PowerManager
        if (pm.isPowerSaveMode) {
            return true
        }
    }
    return false
}

That’s all Folks! I hope you found it useful. Reach out to me in comments for additional support.

Download Wynk Music, the one-stop music app to explore our Dark Theme and for the latest songs, podcasts, hellotunes and a lot more from here.