走通多主题，目前只实现深色主题和浅色主题

src/app.tsx

@@ -1,8 +1,10 @@
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, useState } from 'react'
 import { useLaunch } from '@tarojs/taro'
 import { IntlProvider } from 'react-intl';
 import { FormattedMessage } from 'react-intl';
+import { ConfigProvider, Button } from 'antd';
 import './app.css'
+import { lightTheme, darkTheme } from './themes';
 
 
 const locale = (window.navigator.language || 'en').toLowerCase().split('-')[0]; // Get locale from browser or default to 'en'
@@ -13,20 +15,35 @@ function App({ children }: PropsWithChildren<any>) {
     console.log('App launched.')
   })
 
+  const [currentTheme, setCurrentTheme] = useState(lightTheme); // 默认使用 light 主题
+  const changeTheme = (themeConfig: typeof lightTheme) => {
+    setCurrentTheme(themeConfig);
+  };
+
   // children 是将要会渲染的页面
   // return children
   return (
-    <IntlProvider locale={locale} messages={messages}>
-      <div>
-        <FormattedMessage id="greeting" defaultMessage="Hello, world!" />
-        <br />
-        <FormattedMessage id="name" defaultMessage="John Doe" />
-        {children}
-      </div>
-    </IntlProvider>
+    <ConfigProvider theme={currentTheme}>
+      <IntlProvider locale={locale} messages={messages}>
+        <div style={{backgroundColor: currentTheme.token.colorBgLayout, color: currentTheme.token.colorText, padding: '20px'}}>
+          <div>
+            <FormattedMessage id="greeting" defaultMessage="Hello, world!" />
+            <br />
+            <FormattedMessage id="name" defaultMessage="John Doe" />
+            {children}
+          </div>
+          <Button type="primary" onClick={() => changeTheme(darkTheme)}>
+            Switch to Dark Theme
+          </Button>
+          <Button type="primary" onClick={() => changeTheme(lightTheme)}>
+            Switch to Light Theme
+          </Button>
+        </div>
+      </IntlProvider>
+    </ConfigProvider>
   );
 }
-  
+
 
 
 export default App

src/themes/darkTheme.ts

@@ -0,0 +1,11 @@
+import { theme } from 'antd';
+
+export const darkTheme = {
+  algorithm: theme.darkAlgorithm,
+  token: {
+    colorPrimary: '#ff5722', // 主色调
+    colorBgContainer: '#000000', // 容器背景色
+    colorText: '#FFFFFF', // 文字颜色
+    colorBgLayout: '#121212', // 全局背景色
+  },
+};

src/themes/index.ts

@@ -0,0 +1,4 @@
+import { lightTheme } from './lightTheme';
+import { darkTheme } from './darkTheme';
+
+export { lightTheme, darkTheme };

src/themes/lightTheme.ts

@@ -0,0 +1,11 @@
+import { theme } from 'antd';
+
+export const lightTheme = {
+  algorithm: theme.defaultAlgorithm,
+  token: {
+    colorPrimary: '#1DA57A', // 主色调
+    colorBgContainer: '#FFFFFF', // 容器背景色
+    colorText: '#000000', // 文字颜色
+    colorBgLayout: '#FAFAFA', // 全局背景色
+  },
+};