Making Dark Mode Compatible Apps with Kotlin

Dark mode has become a standard feature in modern mobile applications. Not only does it improve user experience in low-light environments, but it also helps reduce battery usage on OLED screens. As more users demand this feature, developers need to adapt and learn how to implement dark mode effectively, especially when developing Android apps using Kotlin.

In this article, we’ll explore how to make your Android app compatible with dark mode using Kotlin. We’ll go through the necessary XML and Kotlin configurations, best practices, and how to test dark mode effectively.

Why Dark Mode Matters

Dark mode is more than just an aesthetic trend. According to multiple user interface studies, users find dark mode easier on the eyes, particularly in low-light conditions. Additionally, dark themes can extend battery life for devices with OLED or AMOLED displays.

For Android developers, supporting dark mode is no longer optional. Since Android 10 (API level 29), users can enable a system-wide dark theme, and apps are expected to respond accordingly.

Step 1: Update Your themes.xml Files

To support both light and dark modes, you must define separate color resources for each theme. Android handles theme switching automatically if you configure it correctly.

Create two versions of themes.xml:

res/values/themes.xml (Light Theme)

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <item name="colorPrimary">@color/primary_light</item>
        <item name="colorOnPrimary">@color/white</item>
    </style>
</resources>

res/values-night/themes.xml (Dark Theme)

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <item name="colorPrimary">@color/primary_dark</item>
        <item name="colorOnPrimary">@color/black</item>
    </style>
</resources>

The values-night directory is used to override resources when the system is in dark mode. Android will automatically detect the current mode and apply the appropriate theme.

Step 2: Use MaterialComponents Theme

Ensure your app uses a MaterialComponents theme with the DayNight variant. This allows Android to switch between light and dark themes based on user settings.

In your AndroidManifest.xml:

<application
    android:theme="@style/Theme.MyApp"
    ... >

This step is crucial because only themes extending from DayNight can respond to system-wide dark mode settings.

Step 3: Use Theme-Aware Attributes in Layouts

Avoid hardcoding colors in your layout files. Instead, use theme-aware color attributes that will automatically adjust based on the current mode.

Example in XML layout:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="?attr/colorOnPrimary" />

his approach ensures your UI elements adapt correctly to the active theme without extra logic.

Step 4: Handle Runtime Changes in Kotlin (Optional)

If you want to allow users to toggle between light and dark mode manually within the app, you can set the theme programmatically:

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES) // Enable dark mode
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)  // Enable light mode
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM) // Follow system

This gives users direct control and is a great UX enhancement.

Step 5: Test on Multiple Android Versions

Make sure you test your implementation on Android 10 and above. You can change the UI mode on emulators from settings or use developer options on physical devices.

You can also use tools like Material Theme Builder to preview and generate dark-mode palettes before implementing them in your code.

Summary

Dark mode support in Android is now expected by users, and it’s easier than ever to implement using Kotlin. By using the DayNight theme, organizing resources properly, and utilizing Kotlin’s runtime capabilities, you can create beautiful, responsive dark mode experiences that improve usability and battery life.

Make sure to avoid hardcoding values, use attribute references, and always test your app in both light and dark modes. This not only ensures accessibility and UX consistency but also aligns with modern Android development standards.