Merge pull request #226 from GreatAuk/feat-theme

feat: 新增动态主题功能 & 统一设置不同 layout 的主题

src/layouts/default.vue

@@ -1,15 +1,11 @@
 <script lang="ts" setup>
-import type { ConfigProviderThemeVars } from 'wot-design-uni'
+import { useThemeStore } from '@/store'
 
-const themeVars: ConfigProviderThemeVars = {
-  // colorTheme: 'red',
-  // buttonPrimaryBgColor: '#07c160',
-  // buttonPrimaryColor: '#07c160',
-}
+const themeStore = useThemeStore()
 </script>
 
 <template>
-  <wd-config-provider :theme-vars="themeVars">
+  <wd-config-provider :theme-vars="themeStore.themeVars" :theme="themeStore.theme">
     <slot />
     <wd-toast />
     <wd-message-box />

src/layouts/tabbar.vue

@@ -1,12 +1,9 @@
 <script lang="ts" setup>
-import type { ConfigProviderThemeVars } from 'wot-design-uni'
+import { useThemeStore } from '@/store'
 import FgTabbar from '@/tabbar/index.vue'
 
-const themeVars: ConfigProviderThemeVars = {
-  // colorTheme: 'red',
-  // buttonPrimaryBgColor: '#07c160',
-  // buttonPrimaryColor: '#07c160',
-}
+const themeStore = useThemeStore()
+
 const testUniLayoutExposedData = ref('testUniLayoutExposedData')
 defineExpose({
   testUniLayoutExposedData,
@@ -14,7 +11,7 @@ defineExpose({
 </script>
 
 <template>
-  <wd-config-provider :theme-vars="themeVars">
+  <wd-config-provider :theme-vars="themeStore.themeVars" :theme="themeStore.theme">
     <slot />
     <FgTabbar />
     <wd-toast />

src/pages/index/index.vue

@@ -11,10 +11,14 @@
 </route>
 
 <script lang="ts" setup>
+import { useThemeStore } from '@/store'
+
 defineOptions({
   name: 'Home',
 })
 
+const themeStore = useThemeStore()
+
 // 获取屏幕边界到安全区域距离
 let safeAreaInsets
 let systemInfo
@@ -109,8 +113,8 @@ console.log('index')
     <!-- #endif -->
 
     <view class="mt-4 text-center">
-      <wd-button type="primary">
-        UI组件按钮
+      <wd-button type="primary" class="ml-2" @click="themeStore.setThemeVars({ colorTheme: 'red' })">
+        设置主题变量
       </wd-button>
     </view>
     <view class="mt-4 text-center">

src/store/index.ts

@@ -13,5 +13,6 @@ store.use(
 
 export default store
 
+export * from './theme'
 // 模块统一导出
 export * from './user'

src/store/theme.ts

@@ -0,0 +1,42 @@
+import type { ConfigProviderThemeVars } from 'wot-design-uni'
+
+import { defineStore } from 'pinia'
+
+export const useThemeStore = defineStore(
+  'theme-store',
+  () => {
+    /** 主题 */
+    const theme = ref<'light' | 'dark'>('light')
+
+    /** 主题变量 */
+    const themeVars = ref<ConfigProviderThemeVars>({
+      // colorTheme: 'red',
+      // buttonPrimaryBgColor: '#07c160',
+      // buttonPrimaryColor: '#07c160',
+    })
+
+    /** 设置主题变量 */
+    const setThemeVars = (partialVars: Partial<ConfigProviderThemeVars>) => {
+      themeVars.value = { ...themeVars.value, ...partialVars }
+    }
+
+    /** 切换主题 */
+    const toggleTheme = () => {
+      theme.value = theme.value === 'light' ? 'dark' : 'light'
+    }
+
+    return {
+      /** 设置主题变量 */
+      setThemeVars,
+      /** 切换主题 */
+      toggleTheme,
+      /** 主题变量 */
+      themeVars,
+      /** 主题 */
+      theme,
+    }
+  },
+  {
+    persist: true,
+  },
+)

src/tabbar/index.vue

@@ -50,7 +50,7 @@ onLoad(() => {
     },
   })
 })
-const activeColor = '#1890ff'
+const activeColor = 'var(--wot-color-theme, #1890ff)'
 const inactiveColor = '#666'
 function getColorByIndex(index: number) {
   return tabbarStore.curIdx === index ? activeColor : inactiveColor