---
name: android-material3-designer
description: "Material 3 components, dynamic color, motion, and theming — Compose-native, accessibility-tested. Lays down a Material 3 design system: color schemes (with dynamic color), typography scale, motion tokens, and accessible defaults."
license: MIT
---

# Material 3 Designer

Material 3 Designer scaffolds a complete, Compose-native Material 3 (Material You) design system into your Android project: a dynamic-color-aware `ColorScheme`, the full type scale, shape and motion tokens, and component defaults that already pass contrast and touch-target checks. It's built for Android developers and product designers who want a coherent M3 foundation in `androidx.compose.material3` without hand-assembling every token.

## When to use it

- You're starting a new Compose app and want a real theme, not the empty `MaterialTheme` stub from the project wizard.
- You're migrating from Material 2 (`androidx.compose.material`) and need the M3 equivalents for `Colors` → `ColorScheme`, `Typography`, and `Shapes`.
- You want dynamic color from the user's wallpaper on Android 12+ (`dynamicLightColorScheme`/`dynamicDarkColorScheme`) with a sensible static fallback.
- You need accessible defaults: 4.5:1 text contrast, 48dp touch targets, and content descriptions wired into component slots.

## How it works

The skill generates a `Theme.kt` exposing your `@Composable AppTheme(...)` wrapper around `MaterialTheme(colorScheme, typography, shapes, content)`. Color schemes are produced for light and dark with all M3 roles (`primary`, `onPrimary`, `primaryContainer`, `surface`, `surfaceVariant`, `outline`, etc.), and on supported API levels it branches to `dynamicLightColorScheme(context)`. Typography fills the 15-style M3 scale (`displayLarge` through `labelSmall`) via `TextStyle`. Shapes map to `Shapes(extraSmall, small, medium, large, extraLarge)`. Motion is expressed as duration/easing tokens aligned to M3's emphasized and standard easing curves for use with `tween`/`AnimatedContent`. Components (`Button`, `Card`, `NavigationBar`, `TopAppBar`) get themed defaults through their respective `*Defaults` objects.

## Usage

```kotlin
@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit,
) {
    val context = LocalContext.current
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S ->
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        darkTheme -> DarkColors
        else -> LightColors
    }
    MaterialTheme(colorScheme, AppTypography, AppShapes, content)
}
```

## Tips & gotchas

- Dynamic color overrides your brand palette on Android 12+. Pass `dynamicColor = false` where brand fidelity matters (e.g., onboarding, marketing surfaces).
- Edge-to-edge is expected in M3. Call `enableEdgeToEdge()` in your Activity and handle insets, or `TopAppBar` and `NavigationBar` will collide with system bars.
- Use `MaterialTheme.colorScheme.surfaceColorAtElevation(...)` rather than hardcoding elevated surface colors — M3 tints surfaces with primary, it doesn't just shadow them.
- Don't mix `material` and `material3` imports; the two `MaterialTheme` symbols clash and silently fall back to defaults.

## FAQ

**Does this require Material 2 to be removed?** No, but you should drop the `androidx.compose.material` dependency once migrated to avoid import ambiguity. Keep `material-icons-extended` if you use it.

**Can I customize the generated palette?** Yes. Edit the `lightColorScheme(...)`/`darkColorScheme(...)` role values; the skill keeps them in one file so contrast pairs (`primary`/`onPrimary`) stay together.

**What's the minimum setup?** Compose BOM with `androidx.compose.material3` and `minSdk` 21+; dynamic color simply no-ops below API 31 and uses your static scheme.