Modalità scura e colore dinamico
Adatti i colori al sistema e allo sfondo.
Modalità scura e colore dinamico è una lezione Jetpack Compose Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Jetpack Compose Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
Two Palettes, One App
A polished app ships both a light and a dark palette. You define them as separate colorScheme objects and switch between them at the theme level. 🌙
Detect the System Setting
You ask the system which mode is active with isSystemInDarkTheme, a Composable that returns true when the user prefers dark.
val dark = isSystemInDarkTheme()Pick the Scheme
With that flag you choose which palette to pass into MaterialTheme, so the app follows the system dark mode setting automatically.
val scheme = if (dark) darkColorScheme()
else lightColorScheme()darkColorScheme Defaults
The darkColorScheme builder ships sensible low-light defaults, so even before customizing you get readable, comfortable dark surfaces.
Contrast Still Matters
In dark mode you keep the same color roles, but tune surfaces darker and on-colors lighter so text stays easy to read.
What Is Dynamic Color
Dynamic color is Material You magic: on Android 12 and up the system can derive your palette from the user's wallpaper. 🎨
Check the Android Version
Dynamic color needs API 31 or higher, so you gate it with a version check before reaching for the wallpaper-based scheme.
val supported = Build.VERSION.SDK_INT >= 31Build a Dynamic Scheme
When supported, you call dynamicLightColorScheme or its dark variant with a context to pull colors straight from the wallpaper.
dynamicDarkColorScheme(context)Always Have a Fallback
On older devices dynamic color is unavailable, so you fall back to your hand-crafted colorScheme to keep branding intact.
Wire It Together
Your theme picks dynamic when allowed, else dark or light by system setting, so one colorScheme choice handles every case.
val scheme = when {
dynamicOk && dark -> dynamicDarkColorScheme(ctx)
dark -> darkColorScheme()
else -> lightColorScheme()
}Test Both Modes
Preview your screens in light and dark, and on a colorful wallpaper, so dynamic color never surprises you with unreadable combos. ✨
Quick Check
A user on Android 13 sets a purple wallpaper. What can your theme do?
Recap: Adaptive, Personal Color
You detected the system mode with isSystemInDarkTheme, swapped palettes, and layered dynamic color with a safe fallback. 🎉
Domande Frequenti
La lezione «Modalità scura e colore dinamico» è gratuita?
Sì — il testo completo di «Modalità scura e colore dinamico» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Jetpack Compose Academy, passa a CoddyKit PRO. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Cosa imparerò in «Modalità scura e colore dinamico»?
Adatti i colori al sistema e allo sfondo. Eserciti Jetpack Compose Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Jetpack Compose Academy?
Non è richiesta alcuna esperienza precedente. Jetpack Compose Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Modalità scura e colore dinamico»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Jetpack Compose Academy?
Sì. Ogni lezione Jetpack Compose Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- MaterialTheme e schemi di colori
- Tipografia e token delle forme
- Modalità scura e colore dinamico
- Creare un design system personalizzato