diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 360c6b2..d362f86 100644
--- a/src/layouts/default.vue
+++ b/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 />
diff --git a/src/layouts/tabbar.vue b/src/layouts/tabbar.vue
index 7e8d345..d55fb51 100644
--- a/src/layouts/tabbar.vue
+++ b/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 />
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 4353702..1be810f 100644
--- a/src/pages/index/index.vue
+++ b/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
@@ -115,8 +119,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">
diff --git a/src/store/index.ts b/src/store/index.ts
index 74b1b2f..0b98dbc 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -13,5 +13,6 @@ store.use(
 
 export default store
 
+export * from './theme'
 // 模块统一导出
 export * from './user'
diff --git a/src/store/theme.ts b/src/store/theme.ts
new file mode 100644
index 0000000..c3f1c55
--- /dev/null
+++ b/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,
+  },
+)
diff --git a/src/tabbar/config.ts b/src/tabbar/config.ts
index 0153146..7d48a08 100644
--- a/src/tabbar/config.ts
+++ b/src/tabbar/config.ts
@@ -22,7 +22,8 @@ export const TABBAR_STRATEGY_MAP = {
 // 如果是使用 CUSTOM_TABBAR(2,3)，只需要配置 customTabbarList，nativeTabbarList 不生效
 export const selectedTabbarStrategy = TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE
 
-type NativeTabBarItem = TabBar['list'][0]
+type NativeTabBarItem = TabBar['list'][number]
+
 // TODO: 2/3. 使用 NATIVE_TABBAR 时，更新下面的 tabbar 配置
 export const nativeTabbarList: NativeTabBarItem[] = [
   {
@@ -39,7 +40,7 @@ export const nativeTabbarList: NativeTabBarItem[] = [
   },
 ]
 
-interface CustomTabBarItem {
+export interface CustomTabBarItem {
   text: string
   pagePath: string
   iconType: 'uniUi' | 'uiLib' | 'unocss' | 'iconfont' | 'image' // 不建议用 image 模式，需要配置2张图
diff --git a/src/tabbar/index.vue b/src/tabbar/index.vue
index b0ede6f..1a03138 100644
--- a/src/tabbar/index.vue
+++ b/src/tabbar/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-// 'i-carbon-code',
+import type { CustomTabBarItem } from './config'
 import { customTabbarEnable, needHideNativeTabbar, tabbarCacheEnable } from './config'
 import { tabbarList, tabbarStore } from './store'
 
@@ -29,7 +29,7 @@ function handleClick(index: number) {
     handleClickBulge()
     return
   }
-  const url = tabbarList[index].path
+  const url = tabbarList[index].pagePath
   tabbarStore.setCurIdx(index)
   if (tabbarCacheEnable) {
     uni.switchTab({ url })
@@ -50,18 +50,18 @@ onLoad(() => {
     },
   })
 })
-const activeColor = '#1890ff'
+const activeColor = 'var(--wot-color-theme, #1890ff)'
 const inactiveColor = '#666'
 function getColorByIndex(index: number) {
   return tabbarStore.curIdx === index ? activeColor : inactiveColor
 }
 
-function getImageByIndex(index: number, item: { iconActive?: string, icon: string }) {
-  if (!item.iconActive) {
+function getImageByIndex(index: number, item: CustomTabBarItem) {
+  if (!item.activeIcon) {
     console.warn('image 模式下，需要配置 iconActive (高亮时的图片），否则无法切换高亮图片')
     return item.icon
   }
-  return tabbarStore.curIdx === index ? item.iconActive : item.icon
+  return tabbarStore.curIdx === index ? item.activeIcon : item.icon
 }
 </script>
 
diff --git a/src/tabbar/store.ts b/src/tabbar/store.ts
index 2b72f32..da00a61 100644
--- a/src/tabbar/store.ts
+++ b/src/tabbar/store.ts
@@ -1,21 +1,21 @@
+import type { CustomTabBarItem } from './config'
 import { tabbarList as _tabbarList } from './config'
 
 // TODO 1/2: 中间的鼓包tabbarItem的开关
 const BULGE_ENABLE = true
 
 /** tabbarList 里面的 path 从 pages.config.ts 得到 */
-const tabbarList = _tabbarList.map(item => ({ ...item, path: `/${item.pagePath}` }))
+const tabbarList: CustomTabBarItem[] = _tabbarList.map(item => ({ ...item, pagePath: item.pagePath.startsWith('/') ? item.pagePath : `/${item.pagePath}` }))
+
 if (BULGE_ENABLE) {
   if (tabbarList.length % 2 === 1) {
     console.error('tabbar 数量必须是偶数，否则样式很奇怪！！')
   }
   tabbarList.splice(tabbarList.length / 2, 0, {
     isBulge: true,
-  } as any)
+  } as CustomTabBarItem)
 }
 
-export { tabbarList }
-
 export function isPageTabbar(path: string) {
   return tabbarList.some(item => item.pagePath === path)
 }
@@ -25,7 +25,7 @@ export function isPageTabbar(path: string) {
  * tabbar 状态，增加 storageSync 保证刷新浏览器时在正确的 tabbar 页面
  * 使用reactive简单状态，而不是 pinia 全局状态
  */
-export const tabbarStore = reactive({
+const tabbarStore = reactive({
   curIdx: uni.getStorageSync('app-tabbar-index') || 0,
   prevIdx: uni.getStorageSync('app-tabbar-index') || 0,
   setCurIdx(idx: number) {
@@ -33,7 +33,7 @@ export const tabbarStore = reactive({
     uni.setStorageSync('app-tabbar-index', idx)
   },
   setAutoCurIdx(path: string) {
-    const index = tabbarList.findIndex(item => item.path === path)
+    const index = tabbarList.findIndex(item => item.pagePath === path)
     console.log('index:', index, path)
     // console.log('tabbarList:', tabbarList)
     if (index === -1) {
@@ -50,3 +50,5 @@ export const tabbarStore = reactive({
     this.prevIdx = uni.getStorageSync('app-tabbar-index') || 0
   },
 })
+
+export { tabbarList, tabbarStore }