Configuring the theme
The theme generation depends on the ComponentDir
property in the
lumo.properties
file. The plugin has been tested on macOS and Windows. If you
encounter any issues, please create a Github issue or shoot me an email copying the error logs.
Your feedback helps improve the plugin setup experience.
Run this command to generate the theme after configuring properties.
./gradlew lumo --setup
It will generate, Theme.kt
, Colors.kt
, Typography.kt
, and foundation
files.
- Theme.kt
- Colors.kt
- Typography.kt
- lumo.properties
The generated theme implementation shown below is a simplified example.
object AppTheme {
val colors: Colors
@ReadOnlyComposable @Composable get() = LocalColors.current
val typography: Typography
@ReadOnlyComposable @Composable get() = LocalTypography.current
}
@Composable
fun AppTheme(
isDarkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit,
) {
val colors = if (isDarkTheme) DarkColors else LightColors
...
CompositionLocalProvider(
LocalColors provides colors,
LocalTypography provides typography,
LocalIndication provides rippleIndication,
LocalTextSelectionColors provides selectionColors,
LocalContentColor provides colors.contentColorFor(colors.background),
LocalTextStyle provides typography.body1,
content = content
)
}
Colors
The Colors
provides a comprehensive structure for managing theme colors in both light and dark modes.
@Immutable
data class Colors(
val primary: Color,
val onPrimary: Color,
...
val scrim: Color,
val elevation: Color,
)
internal val LightColors = Colors(
primary = Black,
...
elevation = Gray700,
)
internal val DarkColors = Colors(
primary = White,
...
elevation = Gray200,
)
fun Colors.contentColorFor(backgroundColor: Color): Color {
return when (backgroundColor) {
primary -> onPrimary
...
else -> Color.Unspecified
}
}
Typography
Provides a structured way to define text styles such as headings, body text, and labels.
data class Typography(
val h1: TextStyle = TextStyle(
fontFamily = fontFamily,
fontWeight = FontWeight.Bold,
fontSize = 24.sp,
...
),
val body1: TextStyle = TextStyle(
...
),
val label1: TextStyle = TextStyle(
...
),
...
)
val typography = Typography()
val LocalTypography = staticCompositionLocalOf { typography }
Foundation
The foundation package provides essential utilities and defaults for theming, such as ripple effects, elevation, button styling, and system bar configurations.