Material 3

Zum Schluss der Feinschliff: Die Karte im Wetter-Screen hat bisher eine feste Farbe (Color(0xFFBBDEFB)) und feste Schriftgrößen. Im Dark Mode ist ihre Schrift auf dem hellen Hintergrund kaum lesbar, weil das Scaffold die Textfarbe an den dunklen Hintergrund anpasst.

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

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

In CurrentWeatherCard ersetzt die Card die selbst gebaute Box mit background. Den Innenabstand bekommt jetzt die Column:

Card(
    modifier = modifier
        .fillMaxWidth()
        .padding(16.dp),
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.primaryContainer,
    ),
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(text = city.name, style = MaterialTheme.typography.headlineMedium)
        Text(text = weather.condition.emoji(), fontSize = 72.sp)
        Text(
            text = formatTemperature(weather.temperature, useCelsius),
            style = MaterialTheme.typography.displayLarge,
        )
        // Spacer und Row wie bisher, Texte mit MaterialTheme.typography.bodyLarge
    }
}

Nur das Emoji behält eine feste Größe, weil es im Theme keinen passenden Schriftstil dafür gibt. Die Card setzt passend zur Hintergrundfarbe auch die Textfarbe (onPrimaryContainer).

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() { /* ... */ }

Zwei @Preview-Annotationen an derselben Funktion erzeugen zwei Previews, hier eine helle und eine dunkle.

Ab Android 12 passt Dynamic Color die Farben sogar an das Hintergrundbild des Geräts an. Die Vorlage schaltet das in ui/theme/Theme.kt bereits ein (dynamicColor: Boolean = true).

Code: schritt-10 · Änderungen 

Weiterführendes Material

• Material 3 in Compose 
• Material Design 3 : Richtlinien und Komponenten