Anatomía de un tema en Compose

En Jetpack Compose, los temas se componen de varias construcciones de nivel inferior y API relacionadas. Estos elementos se pueden ver en el código fuente de MaterialTheme y también se pueden aplicar en sistemas de diseño personalizados.

Clases del sistema de temas

Por lo general, un tema está compuesto por varios subsistemas que agrupan conceptos visuales y de comportamiento comunes. Esos sistemas se pueden modelar con clases que tienen valores de temas.

Por ejemplo, MaterialTheme incluye ColorScheme (sistema de colores), Typography (sistema de tipografía) y Shapes (sistema de formas).

@Immutable
data class ColorSystem(
    val color: Color,
    val gradient: List<Color>
    /* ... */
)

@Immutable
data class TypographySystem(
    val fontFamily: FontFamily,
    val textStyle: TextStyle
)
/* ... */

@Immutable
data class CustomSystem(
    val value1: Int,
    val value2: String
    /* ... */
)

/* ... */
ThemeAnatomySnippets.kt

Composición local del sistema de temas

Las clases del sistema de temas se proporcionan de forma implícita al árbol de composición como instancias de CompositionLocal. Esto permite que se haga referencia de manera estática a los valores de tema en las funciones que admiten composición.

Si quieres obtener más información acerca de CompositionLocal, consulta la Guía de alcance local con composición de CompositionLocal.

val LocalColorSystem = staticCompositionLocalOf {
    ColorSystem(
        color = Color.Unspecified,
        gradient = emptyList()
    )
}

val LocalTypographySystem = staticCompositionLocalOf {
    TypographySystem(
        fontFamily = FontFamily.Default,
        textStyle = TextStyle.Default
    )
}

val LocalCustomSystem = staticCompositionLocalOf {
    CustomSystem(
        value1 = 0,
        value2 = ""
    )
}

/* ... */
ThemeAnatomySnippets.kt

Función de tema

La función de tema es el punto de entrada y la API principal. Construye instancias de los CompositionLocal de los sistemas de temas, mediante valores reales de cualquier lógica necesaria, que se proporcionan al árbol de composición con CompositionLocalProvider. El parámetro content permite que los elementos componibles anidados accedan a los valores de temas relacionados con la jerarquía.

@Composable
fun Theme(
    /* ... */
    content: @Composable () -> Unit
) {
    val colorSystem = ColorSystem(
        color = Color(0xFF3DDC84),
        gradient = listOf(Color.White, Color(0xFFD7EFFF))
    )
    val typographySystem = TypographySystem(
        fontFamily = FontFamily.Monospace,
        textStyle = TextStyle(fontSize = 18.sp)
    )
    val customSystem = CustomSystem(
        value1 = 1000,
        value2 = "Custom system"
    )
    /* ... */
    CompositionLocalProvider(
        LocalColorSystem provides colorSystem,
        LocalTypographySystem provides typographySystem,
        LocalCustomSystem provides customSystem,
        /* ... */
        content = content
    )
}
ThemeAnatomySnippets.kt

Objeto de tema

El acceso a los sistemas de temas se realiza mediante un objeto con propiedades útiles. Para mantener la coherencia, el objeto tiende a llamarse de la misma forma que la función del tema. Las propiedades simplemente obtienen la composición actual de forma local.

// Use with eg. Theme.colorSystem.color
object Theme {
    val colorSystem: ColorSystem
        @Composable
        get() = LocalColorSystem.current
    val typographySystem: TypographySystem
        @Composable
        get() = LocalTypographySystem.current
    val customSystem: CustomSystem
        @Composable
        get() = LocalCustomSystem.current
    /* ... */
}
ThemeAnatomySnippets.kt