#主题色变量

#一. 简介

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

#二. 主题色

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

#三. 主题色变量

#四. 文本色扩展

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

#在样式文件中使用

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

#在配置中使用

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

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

#五. 主题色小程序

扫码体验主题色小程序：