Setup and configurationConfiguring the theme

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.


Copyright © Noman R