# 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

| Variable Name | Meaning                     |
| ------------- | --------------------------- |
| --app-B1      | Main background color       |
| --app-B2      | Header navigation background |
| --app-B3      | Card background             |
| --app-B4      | Popup background            |
| --app-B5      | Bottom navigation background |
| --app-B6      | List background             |
| --app-M1      | Main color, button background |
| --app-M2      | Auxiliary color 1 (Error/Warning/Danger) |
| --app-M3      | Auxiliary color 2 (Success/Switch/Recommendation) |
| --app-M4      | Auxiliary color 3 (Hint/Guide) |
| --app-M5      | Tab selected color          |

## 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

```less
/* 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.

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

## 5. Theme Color MiniApp

Scan the code to experience the theme color MiniApp:

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