Theming

MaterialTheme, dynamic color and how to build a scheme from one seed color.

• Interactive page: https://m3e.ljzapps.app/#foundations/theming

MaterialTheme exposes colorScheme, typography, shapes and motionScheme through CompositionLocals. Components read these values, so changing the theme restyles every component below it.

MaterialTheme.colorScheme.primary
MaterialTheme.typography.titleLargeEmphasized
MaterialTheme.shapes.extraLarge
MaterialTheme.motionScheme.defaultSpatialSpec<Float>()

Dynamic color on Android

Android 12 and later can derive the scheme from the wallpaper.

val scheme = if (isSystemInDarkTheme()) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)

Seed colors on every platform

Material Kolor is a Kotlin port of Material Color Utilities and works on all Compose Multiplatform targets.

DynamicMaterialExpressiveTheme(
    seedColor = Color(0xFF6750A4),
    style = PaletteStyle.Expressive,
    contrastLevel = Contrast.Default.value,
    motionScheme = MotionScheme.expressive(),
) { /* content */ }

Rules of thumb

Use roles, not hex values. Pair every container role with its on role. Prefer tonal containers over shadows. Let users pick contrast and respect dark mode.