---
summary: "介绍小程序主题色变量的定义、CSS变量使用方式及light/dark主题适配。"
tags: [主题色变量表, 主题CSS变量定义, light与dark主题色值]
questions:
  - 小程序主题色变量有哪些？分别代表什么含义？
  - 如何在 CSS 中使用主题色变量？
  - 文本色扩展的格式和使用方式是什么？
  - 主题色变量可以在哪些配置文件中使用？
  - 如何在 global.config.ts 中引用主题色变量？
  - 小程序的主题色是如何随 App 配置变化的？
---

# 主题色变量

## 一. 简介

小程序主题色是指小程序的主要色调，主要用于小程序的背景色、文字颜色、按钮颜色等。**主题色随着 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 的数字。

### 在样式文件中使用

```less
/* src/app.less */
.app {
  background-color: var(--app-B1);
  color: var(--app-B1-N1);
}
```

### 在配置中使用

- `src/global.config.ts` 全局配置文件
- `src/routers.config.ts` 路由配置文件
- `src/pages/${pageId}/index.config.ts` 页面配置文件中，均可以使用主题色变量。

```typescript
// src/global.config.ts
import { GlobalConfig } from '@ray-js/types';

export const tuya = {
  themeLocation: 'theme.json',
  window: {
    backgroundColor: '--app-B1',
    navigationBarTitleText: 'Title',
    navigationBarBackgroundColor: '@navBgColor',
    navigationBarTextStyle: '@navTxtStyle',
  },
};

const globalConfig: GlobalConfig = {
  basename: '',
};

export default globalConfig;

```

## 五. 主题色小程序

扫码体验主题色小程序：

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