Android 遵循的一套視覺設計規範叫 Material Design，目前分為 Material 2 與 Material 3，Android 11（含）以前是 M2，Android 12 之後是 M3。

Jetpack Compose 原生支援 Material Design，Android Studio 生成的程式碼就有使用一套預設的亮色主題與暗色主題配色。

private val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200
)

private val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200
)

@Composable
fun OpenFCUTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

呼叫 MaterialTheme() 就能讓元件套用自訂的主題。

setContent {
    OpenFCUTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background
        ) {
            Button(onClick = {}) {
                Text("Hello world!")
            }
        }
    }
}