# 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.

```kotlin
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.

```kotlin
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.

```kotlin
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.