Using Compose themes in KMM project

Question

I am following this compose documentation, however since I am working from a KMM project generated by the IDE I do not have a generated ui.theme package as described by the documentation. Where should I look for or write my own theme? should I make my own theme package or is it placed somewhere else in the KMM directory?

Answer 1

If you're sharing your color resources with MOKO, you can also add your own shared color scheme: https://github.com/santansarah/KMM-Firebase-Messaging/tree/main/androidApp/src/main/java/com/santansarah/kmmfirebasemessaging/android/theme

In your theme:

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
) {

    val colors = mokoColorScheme()

    val typography = Typography(
        bodyMedium = TextStyle(
            fontFamily = FontFamily.Default,
            fontWeight = FontWeight.Normal,
            fontSize = 16.sp
        )
    )
    val shapes = Shapes(
        small = RoundedCornerShape(4.dp),
        medium = RoundedCornerShape(4.dp),
        large = RoundedCornerShape(0.dp)
    )

    MaterialTheme(
        colorScheme = colors,
        typography = typography,
        shapes = shapes,
        content = content
    )

}

mokoColorScheme:

@Composable
fun mokoColorScheme(
    primary: Color = colorResource(id = SharedRes.colors.primary.resourceId),
    onPrimary: Color = colorResource(id = SharedRes.colors.lightText.resourceId),
    primaryContainer: Color = colorResource(id = SharedRes.colors.primary.resourceId),
    onPrimaryContainer: Color = colorResource(id = SharedRes.colors.lightText.resourceId),
    inversePrimary: Color = Color.Black,
    secondary: Color = Color.Gray,
    onSecondary: Color = colorResource(id = SharedRes.colors.darkText.resourceId),
    secondaryContainer: Color = Color.Magenta,
    onSecondaryContainer: Color = colorResource(id = SharedRes.colors.lightText.resourceId),
    tertiary: Color = Color.Black,
    onTertiary: Color = colorResource(id = SharedRes.colors.lightText.resourceId),
    tertiaryContainer: Color = Color.Black,
    onTertiaryContainer: Color = colorResource(id = SharedRes.colors.lightText.resourceId),
    background: Color = colorResource(id = SharedRes.colors.background.resourceId),
    onBackground: Color = colorResource(id = SharedRes.colors.darkText.resourceId),
    surface: Color = colorResource(id = SharedRes.colors.background.resourceId),
    onSurface: Color = colorResource(id = SharedRes.colors.darkText.resourceId),
    surfaceVariant: Color = colorResource(id = SharedRes.colors.cardSurface.resourceId),
    onSurfaceVariant: Color = colorResource(id = SharedRes.colors.lightText.resourceId),
    surfaceTint: Color = colorResource(id = SharedRes.colors.cardSurface.resourceId),
    inverseSurface: Color = Color.Black,
    inverseOnSurface: Color = Color.White,
    error: Color = Color.Red,
    onError: Color = colorResource(id = SharedRes.colors.lightText.resourceId),
    errorContainer: Color = Color.Red,
    onErrorContainer: Color = colorResource(id = SharedRes.colors.lightText.resourceId),
    outline: Color = Color.DarkGray,
    outlineVariant: Color = Color.Magenta,
    scrim: Color = Color.DarkGray,
): ColorScheme =
    ColorScheme(
        primary = primary,
        onPrimary = onPrimary,
        primaryContainer = primaryContainer,
        onPrimaryContainer = onPrimaryContainer,
        inversePrimary = inversePrimary,
        secondary = secondary,
        onSecondary = onSecondary,
        secondaryContainer = secondaryContainer,
        onSecondaryContainer = onSecondaryContainer,
        tertiary = tertiary,
        onTertiary = onTertiary,
        tertiaryContainer = tertiaryContainer,
        onTertiaryContainer = onTertiaryContainer,
        background = background,
        onBackground = onBackground,
        surface = surface,
        onSurface = onSurface,
        surfaceVariant = surfaceVariant,
        onSurfaceVariant = onSurfaceVariant,
        surfaceTint = surfaceTint,
        inverseSurface = inverseSurface,
        inverseOnSurface = inverseOnSurface,
        error = error,
        onError = onError,
        errorContainer = errorContainer,
        onErrorContainer = onErrorContainer,
        outline = outline,
        outlineVariant = outlineVariant,
        scrim = scrim,
    )

Answer 2

It will not be inside your KMM directory because it uses the compose API, which is not accessible from shared code.

You can create an empty compose project and copy your theme from there. These files will look like this:

ui/theme/Color.kt

val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)

ui/theme/Shape.kt

val Shapes = Shapes(
    small = RoundedCornerShape(4.dp),
    medium = RoundedCornerShape(4.dp),
    large = RoundedCornerShape(0.dp)
)

ui/theme/Typography.kt

// Set of Material typography styles to start with
val Typography = Typography(
    body1 = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    )
    /* Other default text styles to override
    button = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.W500,
        fontSize = 14.sp
    ),
    caption = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 12.sp
    )
    */
)

ui/theme/Theme.kt

private val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200
)

private val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200

    /* Other default colors to override
    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black,
    */
)

@Composable
fun MyApplicationTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}