[ Web Proxy ]
URL:
Viewing: http://developer.android.com/develop/ui/compose/designsystems/anatomy [Back]  [Original]
Anatomy of a theme in Compose  |  Jetpack Compose  |  Android Developers Skip to main content
Android Developers [Android Developers]
Essentials Design & Plan Develop Google Play Blog
Search:
Android Studio
Overview Tutorial Samples Docs Quick Guides
Android Developers [Android Developers]

Anatomy of a theme in Compose Stay organized with collections Save and categorize content based on your preferences.

Themes in Jetpack Compose are made up of a number of lower-level constructs and related APIs. These can be seen in the source code of MaterialTheme and can also be applied in custom design systems.

Theme system classes

A theme is typically made up of a number of subsystems that group common visual and behavioral concepts. These systems can be modeled with classes which have theming values.

For example, MaterialTheme includes ColorScheme (color system), Typography (typography system), and Shapes (shape system).

Note: Classes should be annotated with Stable or @Immutable to provide information to the Compose compiler. To learn more, check out the Lifecycle of composables guide. 

@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
    /* ... */
)

/* ... */

Theme system composition locals

Theme system classes are implicitly provided to the composition tree as CompositionLocal instances. This allows theming values to be statically referenced in composable functions.

To learn more about CompositionLocal, check out the Locally scoped data with CompositionLocal guide.

Note: You can create a class's CompositionLocal with compositionLocalOf or staticCompositionLocalOf. These functions have a defaultFactory trailing lambda to provide fallback values of the same type that they're providing. It's a good idea to use reasonable defaults like Color.Unspecified, TextStyle.Default, etc. 

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 = ""
    )
}

/* ... */

Theme function

The theme function is the entry point and primary API. It constructs instances of the theme system CompositionLocals using real values and any logic required that are provided to the composition tree with CompositionLocalProvider. The content parameter allows nested composables to access theming values relative to the hierarchy.

@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
    )
}

Theme object

Accessing theme systems is done using an object with convenience properties. For consistency, the object tends to be named the same as the theme function. The properties simply get the current composition 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
    /* ... */
}

Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.

Last updated 2026-07-21 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2026-07-21 UTC."],[],[]]
Web Proxy Viewer  |  New URL  |  Original Page