Material 3

10 MinutenFarben und Schriften aus dem Theme statt fester Werte

Theme statt fester Werte

Material 3 liefert ein Theme mit Farben und Schriften und fertige Bausteine wie Card.

  • MaterialTheme.colorScheme: Farben statt Color(0xFF…)
  • MaterialTheme.typography: Schriftgrößen statt fontSize = …sp
  • Card: Fläche mit Hintergrund und abgerundeten Ecken

Theme statt fester Werte

Card(
    modifier = modifier.fillMaxWidth().padding(16.dp),
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.primaryContainer,
    ),
) {
    Column(/* ... */) {
        Text(text = city.name, style = MaterialTheme.typography.headlineMedium)
        // ...
    }
}

Dark Mode und Dynamic Color

Weil Farben und Schriften aus dem Theme kommen, funktioniert der Dark Mode automatisch.

@Preview(showBackground = true)
@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES, name = "Dark Mode")
@Composable
fun WeatherContentPreview() { /* ... */ }