> For the complete documentation index, see [llms.txt](https://docs.appkickstarter.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.appkickstarter.com/tutorials/update-theme.md).

# 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.

<figure><img src="/files/Z8e3TjtYa6nZCpTsdXmk" alt="" width="356"><figcaption><p>Using Custom Fonts in KMP (Compose Multiplatform)</p></figcaption></figure>

#### 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`.

{% hint style="info" %}
You can specifically call the gradle task to generate all the resources identifiers via : ./gradle generateMRCommonMain
{% endhint %}

#### 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:

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

### Change colors&#x20;

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](/features/theme.md).