# Theme Color Variables

## Overview

The theme color of a miniapp is the main color used for the background, text, buttons, and other elements. The theme color changes following the app configuration and supports light and dark themes. You do not need to take care of changing the theme color.

## Theme color

The theme color values are defined with CSS variables, which will adjust automatically based on the theme.

## Theme color variable

| Variable | Meaning |
| -------- |-----------------|
| --app-B1 | The main background color. |
| --app-B2 | The background of the top navigation. |
| --app-B3 | The background of the card. |
| --app-B4 | The background of the pop-up window. |
| --app-B5 | The background of the bottom navigation. |
| --app-B6 | The background of the list. |
| --app-M1 | The primary color and button background. |
| --app-M2 | Accent color 1 (error/warning/danger) |
| --app-M3 | Accent color 2 (success/toggle/recommendation) |
| --app-M4 | Accent color 3 (prompt/guide) |
| --app-M5 | The color of the active tab. |


## Text color extension

You can set eight text colors for a theme color. The format is `--app-${key}-N${level}`, where `level` ranges from 1 to 8.

### Use in style file

```css
/* app.tyss */
.app {
  background-color: var(--app-M1);
  color: var(--app-M1-N1);
}
```

### Use in configuration file

You can use theme color variables in `app.json` and page configuration files.

```json

{
  "window": {
    "backgroundColor": "--app-B1",
  }
}
```

## Theme color miniapp

Scan the QR code and try the theme color miniapp.

<Image src='/images/design/theme/mp.png' style={{width: '200px'}} />