#主题色变量

#一. 简介

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

#二. 主题色

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

#三. 主题色变量

#四. 文本色扩展

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

#在样式文件中使用

/* 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 页面配置文件中，均可以使用主题色变量。

// 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;

#五. 主题色小程序

扫码体验主题色小程序：