Level 17

Theming & Dark Mode (Material 3)

MaterialTheme, Color Schemes & Dynamic Color

A consistent look comes from a single `MaterialTheme`. You define a light and dark `ColorScheme`, switch based on the system setting, and (on Android 12+) opt into Dynamic Color from the user's wallpaper.

📚 Explanation

`MaterialTheme` exposes colors, typography, and shapes to every child Composable via `MaterialTheme.colorScheme`. You provide separate `lightColorScheme` / `darkColorScheme` definitions and pick one with `isSystemInDarkTheme()`. On Android 12+, `dynamicLightColorScheme`/`dynamicDarkColorScheme` generate a palette from the user's wallpaper, giving each device a personalized yet on-brand look.

Note: Code execution is not available for Android/Kotlin in the browser. Use Android Studio to run and test the app.

kotlin

import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext

private val LightColors = lightColorScheme(
    primary = Color(0xFF006A60),
    secondary = Color(0xFF4A635F)
)

private val DarkColors = darkColorScheme(
    primary = Color(0xFF53DBC9),
    secondary = Color(0xFFB1CCC6)
)

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        // Android 12+: derive colors from the wallpaper
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val ctx = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(ctx) else dynamicLightColorScheme(ctx)
        }
        darkTheme -> DarkColors
        else -> LightColors
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography(),
        content = content
    )
}

Back to Android Levels Back to Developer Hub

Theming & Dark Mode (Material 3)

MaterialTheme, Color Schemes & Dynamic Color

📚 Explanation

Note: Code execution is not available for Android/Kotlin in the browser. Use Android Studio to run and test the app.

import android.os.Build

import androidx.compose.foundation.isSystemInDarkTheme

import androidx.compose.material3.*

import androidx.compose.runtime.Composable

import androidx.compose.ui.graphics.Color

import androidx.compose.ui.platform.LocalContext

private val LightColors = lightColorScheme(

primary = Color(0xFF006A60),

secondary = Color(0xFF4A635F)

)

private val DarkColors = darkColorScheme(

primary = Color(0xFF53DBC9),

secondary = Color(0xFFB1CCC6)

)

@Composable

fun AppTheme(

darkTheme: Boolean = isSystemInDarkTheme(),

dynamicColor: Boolean = true,

content: @Composable () -> Unit

) {

val colorScheme = when {

// Android 12+: derive colors from the wallpaper

dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {

val ctx = LocalContext.current

if (darkTheme) dynamicDarkColorScheme(ctx) else dynamicLightColorScheme(ctx)

}

darkTheme -> DarkColors

else -> LightColors

}

MaterialTheme(

colorScheme = colorScheme,

typography = Typography(),

content = content

)

}