主题颜色修改

2024-01-30 13:47:03 +08:00
parent 417f6788a3
commit b921e2a7e5
8 changed files with 156 additions and 136 deletions
--- a/src/utils/setTheme.ts
+++ b/src/utils/setTheme.ts
@@ -0,0 +1,42 @@
+import { onMounted, watch } from 'vue'
+
+import { useElementPlusTheme } from 'use-element-plus-theme'
+import { useConfig } from '@/stores/config'
+
+const useSetTheme = () => {
+    const configStore = useConfig()
+    const elementPlusTheme = useElementPlusTheme(configStore.getColorVal('elementUiPrimary'))
+    const updateTheme = () => {
+        const root = document.documentElement
+        root.style.setProperty('--vxe-table-header-background-color', configStore.getColorVal('tableHeaderBackground'))
+        root.style.setProperty('--vxe-table-header-font-color', configStore.getColorVal('tableHeaderColor'))
+        root.style.setProperty('--vxe-table-row-current-background-color', configStore.getColorVal('tableCurrent'))
+        root.style.setProperty('--vxe-table-row-hover-background-color', configStore.getColorVal('tableCurrent'))
+        root.style.setProperty(
+            '--vxe-table-row-hover-current-background-color',
+            configStore.getColorVal('tableCurrent')
+        )
+        root.style.setProperty(
+            '--vxe-table-row-hover-striped-background-color',
+            configStore.getColorVal('tableCurrent')
+        )
+    }
+    onMounted(updateTheme)
+    watch(
+        () => configStore.getColorVal('elementUiPrimary'),
+        () => {
+            elementPlusTheme.changeTheme(configStore.getColorVal('elementUiPrimary'))
+        }
+    )
+    watch(
+        [
+            () => configStore.getColorVal('tableHeaderBackground'),
+            () => configStore.getColorVal('tableHeaderColor'),
+            () => configStore.getColorVal('tableCurrent')
+        ],
+        () => {
+            updateTheme()
+        }
+    )
+}
+export default useSetTheme