---
title: 主题色变量
summary: "介绍小程序主题色 CSS 变量的定义和使用方式，支持 light/dark 两种模式自动切换。"
questions:
  - 智能小程序主题色是什么？
  - 主题色值通过什么方式提供给开发者？
  - --app-B1 到 --app-B6 分别代表什么含义？
  - --app-M1 到 --app-M5 分别代表什么含义？
  - 文本色扩展的格式是什么？
  - 文本色扩展支持多少种级别？
  - 如何在样式文件中使用主题色变量？
  - 如何在 app.json 配置文件中使用主题色变量？
  - 主题色是否支持 light 和 dark 两种模式？
  - 主题色随什么配置而变化？
---

# 主题色变量

## 一. 简介

智能小程序主题色是指智能小程序的主要色调，主要用于智能小程序的背景色、文字颜色、按钮颜色等。主题色随着 App 配置而变化，同时支持 light 和 dark 两种主题色。 开发者无需关心主题色的变化。

## 二. 主题色

主题色值通过 css 变量的方式提供，开发者可在 css 中使用变量，在不同主题下，变量值会自动变化。

## 三. 主题色变量

| 变量名   | 含义              |
| -------- |-----------------|
| --app-B1 | 主背景色            |
| --app-B2 | 头部导航背景          |
| --app-B3 | 卡片背景            |
| --app-B4 | 弹窗背景            |
| --app-B5 | 底部导航背景          |
| --app-B6 | 列表背景            |
| --app-M1 | 主色、按钮背景         |
| --app-M2 | 辅色 1(错误/警告/危险)  |
| --app-M3 | 辅色 2 (成功/开关/推荐) |
| --app-M4 | 辅色 3 (提示/引导)    |
| --app-M5 | Tab 选中色         |


## 四. 文本色扩展

在对应的主题色下，文本色扩展了 8 种，开发者可根据需要使用。 格式为 `--app-${key}-N${level}`，其中 level 为 1 ~ 8 的数字。

### 在样式文件中使用

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

### 在配置中使用

app.json 配置文件以及页面配置文件中，可以使用主题色变量。

```json

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

## 五. 主题色小程序

扫码体验主题色小程序：

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