#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

  • 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

  • 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

  • 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:

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

{
  "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

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

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

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

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>
  );
}