Flexible UI framework for defining and merging stylesheets. Customize colors, fonts, sizes, and component styles, supporting light and dark modes. Uses design tokens for consistent styling across components.
Compose StyleSheet is a flexible UI component framework for Jetpack Compose.
This library is still under development. All APIs may change in the future.
fun createStyleSheet(useDarkMode: Boolean): StyleSheet = StyleSheet {
Colors.text += if (useDarkMode) Color.White else Color.Black
Colors.subText += if (useDarkMode) Color.LightGray else Color.DarkGray
Colors.background += if (useDarkMode) Color.Black else Color.White
content {
color += Colors.text
}
surface {
background += Colors.background
}
text(TextTags.primary) {
fontSize += 24.sp
}
text(TextTags.secondary) {
fontSize += 14.sp
color += Colors.subText
}
}
// build.gradle.kts
dependencies {
implementation("com.moriatsushi.compose.stylesheet:compose-stylesheet:0.0.3")
}
To use Compose StyleSheet, you provide a StyleSheet in the root of your app.
You can use themeStyleSheet which supports dark and light mode.
@Composable
fun App() {
val styleSheet = themeStyleSheet()
ProvideStyleSheet(styleSheet) {
/* ... */
}
}
Then, you can use the components.
@Composable
fun Sample() {
Surface {
Text("Hello, Compose StyleSheet!")
}
}
Colors, Fonts, Sizes, Component Styles, etc. are defined in the StyleSheet.
If you want to customize the themeStyleSheet, you can define a StyleSheet and merge it with the
themeStyleSheet.
val yourStyleSheet = StyleSheet {
/* ... */
}
@Composable
fun App() {
val styleSheet = StyleSheet.merge(themeStyleSheet(), yourStyleSheet)
ProvideStyleSheet(styleSheet) {
/* ... */
}
}
You can also create a StyleSheet from scratch without using themeStyleSheet.
Design tokens are named style values, such as colors, fonts, sizes, etc.
You can define design tokens as follows:
val primaryColor = Token("primaryColor", default = Color.Black)
val secondaryColor = Token("secondaryColor", default = Color.DarkGray)
val defaultFontFamily = Token("defaultFontFamily", default = FontFamily.SansSerif)
val defaultFontSize = Token("defaultFontSize", default = 16.sp)
val defaultMargin = Token("defaultMargin", default = 8.dp)
The values of the design tokens can be overridden using the style sheet. For example, you can change the colors based on dark or light mode.
fun createStyleSheet(useDarkMode: Boolean): StyleSheet = StyleSheet {
primaryColor += if (useDarkMode) Color.White else Color.Black
secondaryColor += if (useDarkMode) Color.LightGray else Color.DarkGray
}
The values can be obtained as follows:
@Composable
fun Sample() {
val primaryColorValue = primaryColor.value
val secondaryColorValue = secondaryColor.value
}
You can use the StyleSheet to customize the content style of text, icon, etc.
val styleSheet = StyleSheet {
content {
// Set the text color to the primary color.
// You can use design tokens here.
color += primaryColor
// Set the font size to 16sp.
fontSize += 16.sp
}
}
All components can be styled using the StyleSheet.
val styleSheet = StyleSheet {
surface { // Custom the surface component
// Set the background color of the surface component to #EEEEEE
background += Color(0xFFEEEEEE)
}
}
If there are child contents in the component, you can change the content style as follows:
val styleSheet = StyleSheet {
surface {
content {
// Set the content color in the surface component to red
color += Color.Red
}
}
}
The tags can be used to define variations of a component.
First, you can create a tag with the target component:
val primaryText = Tag("primaryText", text) // A tag for the text component
val subText = Tag("subText", text)
Then, you need to set the style for each tag in the StyleSheet:
val styleSheet = StyleSheet {
text(primaryText) {
color += Color.Black
}
text(subText) {
color += Color.Gray
}
}
Finally, you can specify the tag when using the component:
@Composable
fun Sample() {
Column {
Text("Primary Text", tags = primaryText) // The text color is black
Text("Sub Text", tags = subText) // The text color is gray
}
}
When you specify multiple tags, the merged style is applied:
@Composable
fun Sample() {
Column {
Text("Primary large text", tags = primaryText + largeText)
}
}
Surfaced from shared tags and platforms — no rankings paid for.