Dark Mode and Theme Customization

# CHAPTER 15

Dark Mode and Theme Customization #

1. Introduction #

2. Learning Objectives #

• Understand how Android's Resource Qualifier system applies to colors.

• Use the DayNight Material theme.

• Create a values-night directory for dark mode colors.

• Prevent hardcoded colors from breaking your UI.

• Understand the basics of Material You (Dynamic Color).

3. The DayNight Theme #

<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- Primary brand color. -->
    <item name="colorPrimary">@color/purple_500</item>
    <item name="colorOnPrimary">@color/white</item>
    <!-- Secondary brand color. -->
    <item name="colorSecondary">@color/teal_200</item>
</style>

When using DayNight, Android will automatically switch the default background from white to dark gray, and default text from black to white, based on the user's system settings.

4. Handling Custom Colors (values-night) #

The Solution: Never hardcode colors in your layout XML. Always reference them from colors.xml. Then, create a second colors.xml file specifically for dark mode!

1. 1. In Android Studio, switch to the "Project" view.

1. 2. Navigate to res/ and create a new directory called values-night.

1. 3. Inside it, create a colors.xml file.

Light Mode (res/values/colors.xml)

<resources>
    <color name="card_background">#FFFFFF</color> <!-- White -->
    <color name="brand_text">#333333</color> <!-- Dark Gray -->
</resources>

Dark Mode (res/values-night/colors.xml)

<resources>
    <color name="card_background">#1E1E1E</color> <!-- Dark Surface -->
    <color name="brand_text">#E0E0E0</color> <!-- Light Gray -->
</resources>

Now, in your layout XML:

<TextView
    android:textColor="@color/brand_text"
    android:background="@color/card_background" />

The system will automatically pick the correct color file depending on the active theme!

5. Elevation in Dark Mode #

6. Material You and Dynamic Colors (Android 12+) #

To support this, you apply the Dynamic Colors API in your Application class:

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}

If dynamic colors are available, the system will override your colorPrimary with the user's chosen wallpaper color, making your app feel deeply personal.

7. Design Principles for Dark Mode #

• Avoid Pure Black: Do not use #000000 for the app background. Use a dark gray like #121212. Dark gray reduces eye strain and allows you to show elevation (a slightly lighter gray card on a dark gray background).

• Desaturate Colors: Bright, highly saturated colors vibrate visually against dark backgrounds. In your values-night, provide desaturated, pastel versions of your primary colors.

8. Common Mistakes #

• Hardcoding #FFFFFF or #000000: If you write android:textColor="#000000" in your layout, that text will be invisible when the background turns dark. Always use ?attr/colorOnSurface or reference a color resource.

• Forgetting Vector Icons: If you use a black PNG icon, it will disappear in dark mode. Use Vector Assets and apply app:tint="?attr/colorControlNormal" so they change color automatically.

9. Best Practices #

• Allow the user to override the system setting. Provide a settings toggle in your app: "Light", "Dark", or "System Default".

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

10. Exercises #

1. 1. Create a values-night directory and a colors.xml file inside it.

1. 2. Define a color named app_background in both the standard and night colors.xml. Use a light gray for day, and a very dark blue for night. Apply it to your main layout and toggle the emulator's dark mode to see it change.

11. UI Design Challenges #

12. MCQ Quiz with Answers #

13. Interview Questions #

• Q: Why is it recommended to use #121212 (dark gray) instead of #000000 (pure black) for dark mode backgrounds?

• Q: What does the DayNight theme do under the hood?

• Q: Explain how you would allow a user to manually toggle Dark Mode from within your app's settings.

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #