主题色配置

一. 简介

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

二. 主题色

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

三. 主题色变量

四. 文本色扩展

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

示例：

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

五. 主题色小程序

扫码体验主题色小程序：

高级进阶

一. 自定义主题

如果你想要自定义主题色，可以通过 app.tyss 内声明：

page {
  color-scheme: light;
  --custom-color: #ff0000;
}
@media (prefers-color-scheme: dark) {
  page {
    color-scheme: dark;
    --custom-color: #0000ff;
  }
}

This page is about configuring the theme color of a Smart MiniApp. The theme color is the main color tone of a Smart MiniApp mainly used for the background color, text color, button color, etc. of a Smart MiniApp. The theme color changes with the app configuration and supports both light and dark themes. Developers do not need to worry about the change of theme color. The theme color value is provided through css variables, and developers can use variables in css. Under different themes, variable values will change automatically. For more information on theme colors and variables, please refer to the web page context above.