Update theme

Using Custom Fonts in KMP (Compose Multiplatform)

Place your new font files in the appropriate resources module in commonMain/resources/MR/fonts directory within your project.

For example, if you're using the Inter font family, you might have various font weights (e.g., Regular, Medium, Bold) stored as .ttf files in the resources/fonts directory.

Using Custom Fonts in KMP (Compose Multiplatform)

Accessing Fonts with Resource Identifiers

Resource identifiers for fonts are automatically generated by the build system. To use a font in your custom typography, you access it through a fontFamilyResource function, specifying the path to the font resource. Here's an example of accessing the Inter Regular font:

val InterRegular: FontFamily = fontFamilyResource(SharedRes.fonts.Inter.regular)

This line of code creates a FontFamily instance for the Inter Regular font by referencing its resource identifier, which is resolved at compile time through SharedRes.fonts.Inter.regular.

You can specifically call the gradle task to generate all the resources identifiers via : ./gradle generateMRCommonMain

Defining Custom Typography

With your FontFamily instances ready, you can define a custom typography set that utilizes these fonts. The CustomTypography class allows you to specify text styles for different UI elements, such as labels, titles, and body text. Each style can be customized with attributes like fontFamily, fontWeight, fontSize, and more.

Here's how you can use the new Inter Regular font to all your labels in your app, update customTypography in the KickstarterTheme function:

val customTypography = CustomTypography(
    label = TextStyle(
        fontFamily = InterRegular,
        fontWeight = FontWeight.Medium,
        fontSize = 15.sp, 
    ),
    // Define other text styles as needed
)

Change colors

The fastest way to change the default colors is to update AppKickstarterColors to your needs:

val AppKickstarterColors: (Boolean) -> CustomColors = { useDarkTheme ->
    if (useDarkTheme) {
        CustomColors(
            background = Color(0XFF14121d),
            cardBackground = Color(0XFF241e34),
            sheetBackground = Color(0XFF432f5d),
            ...
        )
    }
}

But if you want to build a proper design system with all your own typography, colors, and dimensions then you will find more informations on this page.