Modo oscuro y color dinámico
Adapte los colores al sistema y al fondo de pantalla.
Modo oscuro y color dinámico es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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. 🎉
Preguntas frecuentes
¿La lección «Modo oscuro y color dinámico» es gratis?
Sí — el texto completo de «Modo oscuro y color dinámico» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Modo oscuro y color dinámico»?
Adapte los colores al sistema y al fondo de pantalla. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Modo oscuro y color dinámico»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- MaterialTheme y esquemas de color
- Tipografía y tokens de forma
- Modo oscuro y color dinámico
- Crear un sistema de diseño personalizado