style: 菜单背景支持跟随暗黑模式

kailong321200875 · Dec 26, 2023 · b34aeba · b34aeba
1 parent 49a1f54
commit b34aeba
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 16 deletions.
diff --git a/src/components/Setting/src/Setting.vue b/src/components/Setting/src/Setting.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { ElDrawer, ElDivider, ElMessage } from 'element-plus'
-import { ref, unref, computed, watch } from 'vue'
+import { ref, unref, computed } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { colorIsDark, lighten, hexToRGB } from '@/utils/color'
 import { useCssVar } from '@vueuse/core'
 import { useAppStore } from '@/store/modules/app'
-import { trim, setCssVar } from '@/utils'
+import { trim, setCssVar, getCssVar } from '@/utils'
 import ColorRadioPicker from './components/ColorRadioPicker.vue'
 import InterfaceDisplay from './components/InterfaceDisplay.vue'
 import LayoutRadioPicker from './components/LayoutRadioPicker.vue'
@@ -95,17 +95,17 @@ const setMenuTheme = (color: string) => {
 }
 
 // 监听layout变化，重置一些主题色
-watch(
-  () => layout.value,
-  (n) => {
-    if (n === 'top' && !appStore.getIsDark) {
-      headerTheme.value = '#fff'
-      setHeaderTheme('#fff')
-    } else {
-      setMenuTheme(unref(menuTheme))
-    }
-  }
-)
+// watch(
+//   () => layout.value,
+//   (n) => {
+//     if (n === 'top' && !appStore.getIsDark) {
+//       headerTheme.value = '#fff'
+//       setHeaderTheme('#fff')
+//     } else {
+//       setMenuTheme(unref(menuTheme))
+//     }
+//   }
+// )
 
 // 拷贝
 const copyConfig = async () => {
@@ -192,6 +192,12 @@ const clear = () => {
   storageClear()
   window.location.reload()
 }
+
+const themeChange = () => {
+  const color = getCssVar('--el-bg-color')
+  setMenuTheme(color)
+  setHeaderTheme(color)
+}
 </script>
 
 <template>
@@ -211,7 +217,7 @@ const clear = () => {
     <div class="text-center">
       <!-- 主题 -->
       <ElDivider>{{ t('setting.theme') }}</ElDivider>
-      <ThemeSwitch />
+      <ThemeSwitch @change="themeChange" />
 
       <!-- 布局 -->
       <ElDivider>{{ t('setting.layout') }}</ElDivider>

diff --git a/src/components/ThemeSwitch/src/ThemeSwitch.vue b/src/components/ThemeSwitch/src/ThemeSwitch.vue
@@ -7,6 +7,8 @@ import { useDesign } from '@/hooks/web/useDesign'
 
 const { getPrefixCls } = useDesign()
 
+const emit = defineEmits(['change'])
+
 const prefixCls = getPrefixCls('theme-switch')
 
 const Sun = useIcon({ icon: 'emojione-monotone:sun', color: '#fde047' })
@@ -23,6 +25,7 @@ const blackColor = 'var(--el-color-black)'
 
 const themeChange = (val: boolean) => {
   appStore.setIsDark(val)
+  emit('change', val)
 }
 </script>
 

diff --git a/src/layout/components/ToolHeader.vue b/src/layout/components/ToolHeader.vue
@@ -41,8 +41,7 @@ export default defineComponent({
         id={`${variables.namespace}-tool-header`}
         class={[
           prefixCls,
-          'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
-          'dark:bg-[var(--el-bg-color)]'
+          'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between'
         ]}
       >
         {layout.value !== 'top' ? (

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -45,6 +45,10 @@ export const setCssVar = (prop: string, val: any, dom = document.documentElement
   dom.style.setProperty(prop, val)
 }
 
+export const getCssVar = (prop: string, dom = document.documentElement) => {
+  return getComputedStyle(dom).getPropertyValue(prop)
+}
+
 /**
  * 查找数组对象的某个下标
  * @param {Array} ary 查找的数组