Crear un sistema de diseño personalizado
Amplíe el tema con sus propios tokens.
Crear un sistema de diseño personalizado es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 4 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.
Beyond the Defaults
Real brands need more than Material's built-ins. A design system bundles your colors, type, shapes, and extra tokens into one reusable theme. 🏗️
Wrap MaterialTheme
You start by writing your own AppTheme Composable that configures MaterialTheme, giving the whole app a single, named entry point.
@Composable
fun AppTheme(content: @Composable () -> Unit) { /* ... */ }Pass Your Tokens In
Inside AppTheme you hand MaterialTheme your custom colorScheme, typography, and shapes, so every screen inherits your brand automatically.
MaterialTheme(
colorScheme = brandColors,
typography = brandType,
shapes = brandShapes
) { content() }Material Misses Some Tokens
Some brand values, like a success green or a custom spacing unit, have no Material role. You add these as your own extra tokens.
Hold Extra Colors
You group extra colors in a small data class, a tidy home for brand values Material does not provide out of the box.
data class BrandColors(
val success: Color,
val warning: Color
)CompositionLocal
To share custom tokens down the tree without passing parameters, you use a CompositionLocal, Compose's built-in ambient value mechanism.
Create the Local
You declare a staticCompositionLocalOf with a default, creating a channel any Composable can read your brand colors from.
val LocalBrand = staticCompositionLocalOf { defaultBrand }Provide the Values
In AppTheme you wrap content in a CompositionLocalProvider, feeding your brand tokens into the tree alongside MaterialTheme.
CompositionLocalProvider(LocalBrand provides brand) {
MaterialTheme(/* ... */) { content() }
}Read Custom Tokens
Anywhere below, a Composable reads LocalBrand.current to grab your custom values, mirroring how MaterialTheme exposes its own.
val success = LocalBrand.current.successOffer a Clean API
Many teams expose an object so calls read like AppTheme.brand.success, a friendly facade over the CompositionLocal underneath.
One Source of Truth
Now colors, type, shapes, and custom tokens all flow from a single theme, so the app stays consistent and effortless to evolve. ✨
Quick Check
You need a brand color Material has no role for, shared app-wide. What do you reach for?
Recap: Your Own Theme
You wrapped MaterialTheme in an AppTheme, added extra tokens via CompositionLocal, and gave your app one branded source of truth. 🎉
Preguntas frecuentes
¿La lección «Crear un sistema de diseño personalizado» es gratis?
Sí — el texto completo de «Crear un sistema de diseño personalizado» 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 «Crear un sistema de diseño personalizado»?
Amplíe el tema con sus propios tokens. 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 4 de 4.
¿Cuánto tiempo toma la lección «Crear un sistema de diseño personalizado»?
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