feat: change primary color

packages/hooks/src/config/useAppConfig.ts

@@ -111,14 +111,14 @@ function handlerResults(
         },
         sidebar: { collapsed: false },
       }
-
+    //todo remove it
     case HandlerSettingEnum.CHANGE_THEME_COLOR:
       if (unref(themeColor) === value) {
         return {}
       }
       // changeTheme(value);
       return { themeColor: value }
-
+    //todo remove it
     case HandlerSettingEnum.CHANGE_THEME:
       return { theme: value }
 

packages/hooks/src/web/useTheme.ts

@@ -16,7 +16,7 @@ export function createMediaPrefersColorSchemeListen() {
   )
 }
 
-interface ThemeColors {
+export interface ThemeColors {
   primaryColor?: string
   primaryColorHover?: string
   primaryColorPressed?: string
@@ -42,6 +42,7 @@ interface ThemeColors {
 export const useAppTheme = () => {
   const themeStore = useThemeStore()
   //todo theme从themeStore里取
+  const { setThemeConfig } = themeStore
   const { getTheme, getThemeConfig } = storeToRefs(themeStore)
 
   const { theme, baseHandler } = useAppConfig()
@@ -61,6 +62,10 @@ export const useAppTheme = () => {
     return ''
   })
 
+  const primaryColor = computed(() => {
+    return getThemeConfig.value.primaryColor
+  })
+
   const themeColors = computed(() => {
     let colors: ThemeColors = {}
     const themeConfig = getThemeConfig.value
@@ -143,5 +148,12 @@ export const useAppTheme = () => {
     { deep: true },
   )
 
-  return { isDark, toggleTheme, themeColor, themeColors }
+  return {
+    isDark,
+    toggleTheme,
+    themeColor,
+    primaryColor,
+    themeColors,
+    setThemeConfig,
+  }
 }

packages/layouts/src/components/setting/components/SettingDrawer.vue

@@ -15,15 +15,18 @@ import {
 import { context } from '../../../../bridge'
 import { navigationBarTypeList } from '../constant'
 import { useI18n } from '@vben/locale'
+import { useAppTheme } from '@vben/hooks'
 
 const { useAppConfig } = context
 const { baseHandler } = useAppConfig()
 
+const { primaryColor } = useAppTheme()
+
 const { t } = useI18n()
 
 const { useMenuSetting, useHeaderSetting, useRootSetting } = context
 
-const { getShowDarkModeToggle, getThemeColor } = useRootSetting()
+const { getShowDarkModeToggle } = useRootSetting()
 const { getIsHorizontal, getMenuType, getMenuBgColor } = useMenuSetting()
 const { getHeaderBgColor } = useHeaderSetting()
 
@@ -67,7 +70,7 @@ const onVisible = (show: boolean) => {
         t('layout.setting.sysTheme')
       }}</VbenDivider>
       <ThemeColorPicker
-        :def="getThemeColor"
+        :def="primaryColor"
         :event="HandlerSettingEnum.CHANGE_THEME_COLOR"
         :color-list="APP_PRESET_COLOR_LIST"
       />

packages/layouts/src/components/setting/components/ThemeColorPicker.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup name="ThemeColorPicker">
 import { PropType } from 'vue'
 import { HandlerSettingEnum } from '@vben/constants'
-import { context } from '../../../../bridge'
-const { useAppConfig } = context
-const { baseHandler } = useAppConfig()
+import { useAppTheme } from '@vben/hooks'
+const { setThemeConfig } = useAppTheme()
 
 const props = defineProps({
   colorList: {
@@ -20,8 +19,11 @@ const props = defineProps({
   },
 })
 
-const handleClick = (color) => {
-  baseHandler(props.event, color)
+const handleClick = (color: string) => {
+  switch (props.event) {
+    case HandlerSettingEnum.CHANGE_THEME_COLOR:
+      setThemeConfig({ primaryColor: color })
+  }
 }
 </script>
 <template>

packages/stores/src/modules/themeStore.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { ThemeEnum } from '@vben/constants'
 
-interface ThemeColorConfig {
+export interface ThemeColorConfig {
   primaryColor: string //主题色
   infoColor: string //信息色
   successColor: string //成功色