Theme Overrides

Learn how to override your themes for advanced customizations.

What are theme overrides?

Theme overrides allow you to override your theme's default styling for a group of components at once.

This is handy for when:

• You want to style a group of components as a group, instead of styling each one individually
• You are responsible for styling a piece of UI you do not control (i.e., you are building slot-based components)

Styling a group of components

Every component in Unstyled is themable. They will make use of the current theme's default content color and default text style to render their content.

Instead of styling each component individually:

Column {
    Text("Less than 10 minutes remaining") 
    Icon(Lucide.AlarmClock, contentDescription = null, tint = Color.Red.copy(alpha = 0.6f)) 
    Text("You are running out of time!", color = Color.Red.copy(alpha = 0.6f)) 
}

use the ProvideContentColor to override the content color used:

Column {
    Text("Less than 10 minutes remaining") 
    ProvideContentColor(Color.Red.copy(alpha = 0.6f)) {
        Icon(Lucide.AlarmClock, contentDescription = null) // automatically picks up the red color
        Text("You are running out of time!") // automatically picks up the red color
    }
}

Both the Icon and Text components automatically inherit the provided color without needing explicit styling parameters.

ProvideTextStyle is also available for overriding the text style used.

If you need to override an entire theme use ThemeOverride which allows to override specific theme token values.

Styling slot-based components

You can use theme overrides to provide a specific styling to the content of your slots:

@Composable
fun Card(
    contentColor: Color = Color.Black,
    backgroundColor: Color = Color.White,
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Box(modifier.background(backgroundColor)) {
        ProvideContentColor(contentColor) {
            content()
        }
    }
}

This way the Card component is responsible for styling itself and its content. Any component passed to the content slot will be styled accordingly.