first commit

src/components/ThemeToggle/index.tsx

@@ -0,0 +1,22 @@
+import { View, Text } from '@tarojs/components'
+import { useCallback } from 'react'
+import { useThemeContext } from '../../context/ThemeContext'
+import './index.scss'
+
+export default function ThemeToggle() {
+  const { theme, toggleTheme } = useThemeContext()
+
+  const handleToggle = useCallback(() => {
+    toggleTheme()
+    // 触发全局事件，让其他已挂载页面也能感知
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const Taro = require('@tarojs/taro').default
+    Taro.eventCenter.trigger('theme:storageChanged')
+  }, [toggleTheme])
+
+  return (
+    <View className='theme-toggle' onClick={handleToggle}>
+      <Text className='theme-icon'>{theme === 'light' ? '🌙' : '☀️'}</Text>
+    </View>
+  )
+}