# Application Configuration

## 1. Related Configuration

### Operation Process

1. In `src/global.config.ts`, configure `themeLocation` to specify the path of the variable configuration file `theme.json`. For example, if you add `theme.json` in the src directory, you need to configure `"themeLocation":"theme.json"`.
2. Define related variables in `src/theme.json`.
3. In the global configuration of `src/global.config.ts`, the route configuration of `src/routes.config.ts`, or the page configuration of `src/pages/${pageId}/index.config.ts`, reference the variables with an `@` prefix.

The following three categories support variable configuration:

### Global Configuration

- Under the `tuya.window` object in the global configuration file `src/global.config.ts`:
  > See [MiniApp Configuration - app.json Global Configuration#window](/en/miniapp/develop/miniapp/framework/app/app-json#window)
  - navigationBarBackgroundColor
  - navigationBarTextStyle
  - backgroundColor
  - backgroundTextStyle
  - backgroundColorTop
  - backgroundColorBottom

### Route Configuration

- Under the exported `tabBar` object in the route configuration file `src/routes.config.ts`:
  > See [MiniApp Configuration - app.json Global Configuration#tabbar](/en/miniapp/develop/miniapp/framework/app/app-json#tabbar)
  - color
  - selectedColor
  - backgroundColor
  - borderStyle
  - list
    - iconPath
    - selectedIconPath

### Page Configuration

- Under the exported object in the page configuration file `src/pages/${pageId}/index.config.ts`:
  > See [MiniApp Page - Page Configuration](/en/miniapp/develop/miniapp/framework/page/json#configuration)
  - backgroundColor
  - backgroundTextStyle
  - navigationBarBackgroundColor
  - navigationBarTextStyle

## 2. Variable Configuration File

`theme.json` is used to define variables related to color themes. You need to configure the path of `theme.json` in `themeLocation` first; otherwise, the variable configuration cannot be read.

The configuration file must include the following properties:

| Property | Type   | Required | Description            |
| -------- | ------ | -------- | ---------------------- |
| light    | object | Yes      | Variable definitions for light mode |
| dark     | object | Yes      | Variable definitions for dark mode  |

Both light and dark modes can define variables and values in the `key: value` format, for example:

```json
{
  "light": {
    "navBgColor": "#F6F7FB",
    "navTxtStyle": "black",
    "bgColor": "rgba(0, 0, 0, 0.7)",
    "setNavBgColor": "#FFFFFF",
    "setBgColor": "#f5f5f5",
    "tabFontColor": "#000000",
    "tabSelectedColor": "#3cc51f",
    "tabBgColor": "#ffffff",
    "tabBorderStyle": "black"
  },
  "dark": {
    "navBgColor": "#F6F7FB",
    "navTxtStyle": "black",
    "bgColor": "rgba(0, 0, 0, 0.7)",
    "setNavBgColor": "#FFFFFF",
    "setBgColor": "#f5f5f5",
    "tabFontColor": "#ffffff",
    "tabSelectedColor": "#51a937",
    "tabBgColor": "#191919",
    "tabBorderStyle": "white"
  }
}
```

After defining, you can reference these variables with an `@` prefix in the related properties of global or page configuration, for example:

### Integrating with Global Configuration

```typescript
// src/global.config.ts
import { GlobalConfig } from '@ray-js/types';

export const tuya = {
  themeLocation: 'theme.json',
  window: {
    backgroundColor: '@bgColor',
    navigationBarTitleText: 'Title',
    navigationBarBackgroundColor: '@navBgColor',
    navigationBarTextStyle: '@navTxtStyle',
  },
};

const globalConfig: GlobalConfig = {
  basename: '',
};

export default globalConfig;
```

### Integrating with Route Configuration

```typescript
// src/routes.config.ts
import { Routes, TabBar } from '@ray-js/types';

export const routes: Routes = [
  {
    route: '/',
    path: '/pages/home/index',
    name: 'Home',
  },
  {
    route: '/history',
    path: '/pages/history/index',
    name: 'History',
  },
  {
    route: '/setting',
    path: '/pages/setting/index',
    name: 'Setting',
  },
];

export const tabBar: TabBar = {
  textColor: '@tabFontColor',
  selectedColor: '@tabSelectedColor',
  backgroundColor: '@tabBgColor',
  borderStyle: '@tabBorderStyle' as 'white' | 'black',
  list: [
    {
      text: 'Home',
      icon: '/tabBar/home.png', // Note that this icon needs to exist under public/tabBar/home.png
      route: '/',
      activeIcon: '/tabBar/home-active.png', // Note that this icon needs to exist under public/tabBar/home-active.png
      pagePath: '/pages/home/index',
    },
    {
      text: 'History',
      icon: '/tabBar/history.png',
      route: '/history',
      activeIcon: '/tabBar/history-active.png',
      pagePath: '/pages/history/index',
    },
    {
      text: 'Setting',
      icon: '/tabBar/setting.png',
      route: '/setting',
      activeIcon: '/tabBar/setting-active.png',
      pagePath: '/pages/setting/index',
    },
  ],
};
```

### Integrating with Page Configuration

```typescript
// src/pages/home/index.config.ts
export default {
  backgroundColor: '@bgColor',
  navigationBarBackgroundColor: '@navBgColor',
  navigationBarTextStyle: '@navTxtStyle',
  navigationBarTitleText: 'Home',
  disableScroll: true,
};
```

Once configured, the Ray framework will automatically display the colors corresponding to the theme based on the system theme.

## 3. Get Current System Theme

The `getSystemInfo` or `getSystemInfoSync` return result will include the `theme` attribute, with a value of either `light` or `dark`.

## 4. Listen for Theme Change Events

You can listen for theme change events using `useAppEvent`, as shown in the following code:

```jsx | sandbox previewTitle="Listen for Theme Change Events"
import React from 'react';
import { Text, View, useAppEvent } from '@ray-js/ray';

export default function App() {
  useAppEvent('onThemeChange', data => {
    console.log('This hook is equivalent to onThemeChange', data);
  });

  return (
    <View>
      <Text>Switch the system theme and check the log output</Text>
    </View>
  );
}
```