#Theme Color Variables

#1. Introduction

MiniApp theme colors refer to the primary tones used in a MiniApp, mainly for background colors, text colors, button colors, etc. Theme colors change with App configuration, and support both light and dark themes. Developers do not need to worry about changes in theme colors.

#2. Theme Colors

Theme color values are provided through CSS variables. Developers can use these variables in CSS, and the variable values will automatically change under different themes.

#3. Theme Color Variables

#4. Text Color Extensions

Under the corresponding theme color, text colors are extended into 8 types. Developers can use them as needed. The format is --app-${key}-N${level}, where level is a number from 1 to 8.

#Using in Style Files

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

#Using in Configuration

• src/global.config.ts global configuration file
• src/routers.config.ts router configuration file
• src/pages/${pageId}/index.config.ts page configuration file, all can use theme color variables.

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

#5. Theme Color MiniApp

Scan the code to experience the theme color MiniApp: