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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.appkickstarter.com/tutorials/update-theme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.