# Application Configuration

## Settings

1. Set `themeLocation` in `app.json` to define the path of the variable configuration file `theme.json`. For example, if you add `theme.json` to the root directory, the setting should be `"themeLocation":"theme.json"`.
2. Define variables in `theme.json`.
3. Start a statement with `@` in `app.json` to reference a variable.

Variables can be used to configure the following properties:

- Global `window` properties and page properties:
   - navigationBarBackgroundColor
   - navigationBarTextStyle
   - backgroundColor
   - backgroundTextStyle
   - backgroundColorTop
   - backgroundColorBottom
- Global `window.tabBar` properties:
   - color
   - selectedColor
   - backgroundColor
   - borderStyle
   - list
      - iconPath
      - selectedIconPath

## Variable configuration file `theme.json`

`theme.json` is used to define the variables of color themes. You must configure `theme.json` in `themeLocation` before the variable definitions can be read.

The configuration file must contain the following properties:

| Property | Type | Required | Description |
| ----- | ------ | ---- | -------------------- |
| light | object | Yes | The variable definitions in light mode. |
| dark | object | Yes | The variable definitions in dark mode. |

In light and dark modes, the name and value of each variable are defined in the `key: value` format. 

**Example**:

```json
{
  "light": {
    "navBgColor": "#f6f6f6",
    "navTxtStyle": "black"
  },
  "dark": {
    "navBgColor": "#191919",
    "navTxtStyle": "white"
  }
}
```

After a variable is defined, you can start a statement with `@` in the global configuration or page configuration to reference the variable. 

**Example**:

### Global configuration

```json
{
  "window": {
    "navigationBarBackgroundColor": "@navBgColor",
    "navigationBarTextStyle": "@navTxtStyle"
  }
}
```

### Page configuration

```json
{
  "navigationBarBackgroundColor": "@navBgColor",
  "navigationBarTextStyle": "@navTxtStyle"
}
```

After the theme is configured, the Smart MiniApp framework automatically displays the configured theme colors on your miniapp.

## Example

### app.json

> The example excluded configuration items irrelevant to the topic.

```json
{
  "window": {
    "navigationBarBackgroundColor": "@navBgColor",
    "navigationBarTextStyle": "@navTxtStyle",
    "backgroundColor": "@bgColor",
    "backgroundTextStyle": "@bgTxtStyle",
    "backgroundColorTop": "@bgColorTop",
    "backgroundColorBottom": "@bgColorBottom"
  },
  "tabBar": {
    "color": "@tabFontColor",
    "selectedColor": "@tabSelectedColor",
    "backgroundColor": "@tabBgColor",
    "borderStyle": "@tabBorderStyle",
    "list": [
      {
        "iconPath": "@iconPath1",
        "selectedIconPath": "@selectedIconPath1"
      },
      {
        "iconPath": "@iconPath2",
        "selectedIconPath": "@selectedIconPath2"
      }
    ]
  }
}
```

### theme.json

```json
{
  "light": {
    "navBgColor": "#f6f6f6",
    "navTxtStyle": "black",
    "bgColor": "#ffffff",
    "bgTxtStyle": "light",
    "bgColorTop": "#eeeeee",
    "bgColorBottom": "#efefef",
    "tabFontColor": "#000000",
    "tabSelectedColor": "#3cc51f",
    "tabBgColor": "#ffffff",
    "tabBorderStyle": "black",
    "iconPath1": "image/icon1_light.png",
    "selectedIconPath1": "image/selected_icon1_light.png",
    "iconPath2": "image/icon2_light.png",
    "selectedIconPath2": "image/selected_icon2_light.png"
  },
  "dark": {
    "navBgColor": "#191919",
    "navTxtStyle": "white",
    "bgColor": "#1f1f1f",
    "bgTxtStyle": "dark",
    "bgColorTop": "#191919",
    "bgColorBottom": "#1f1f1f",
    "tabFontColor": "#ffffff",
    "tabSelectedColor": "#51a937",
    "tabBgColor": "#191919",
    "tabBorderStyle": "white",
    "iconPath1": "image/icon1_dark.png",
    "selectedIconPath1": "image/selected_icon1_dark.png",
    "iconPath2": "image/icon2_dark.png",
    "selectedIconPath2": "image/selected_icon2_dark.png"
  }
}
```

## Get current system theme

The return result of `ty.getSystemInfo` or `ty.getSystemInfoSync` contains the `theme` property. The value of `theme` is light or dark.

## Listen for theme switching event

You can listen for an event of switching between theme modes in one of the following ways:

1. Pass in the callback method `onThemeChange` in `App()`. When users switch between theme modes, this callback will be triggered.
2. Use `ty.onThemeChange` to listen for theme changes, and use `ty.offThemeChange` to remove the listener.