diff --git a/src/App.vue b/src/App.vue index c0d88faa..99baecc6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -20,8 +20,7 @@ const match: MediaQueryList = window.matchMedia("(prefers-color-scheme: dark)") match.addEventListener('change', followSystem) function followSystem() { - const theme = match.matches ? 'dark' : 'light' - document.documentElement.setAttribute('data-theme', theme) + document.documentElement.className = match.matches ? 'dark' : 'light' } watch(store.$state, (n) => { @@ -52,7 +51,7 @@ onMounted(() => { store.init() settingStore.init() if (settingStore.theme !== 'auto') { - document.documentElement.setAttribute('data-theme', settingStore.theme) + document.documentElement.className = settingStore.theme } }) diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss index 2c618de9..f93b6d57 100644 --- a/src/assets/css/style.scss +++ b/src/assets/css/style.scss @@ -2,6 +2,8 @@ @import "/node_modules/hover.css"; @import "variable.scss"; @import "anim"; +@import 'element-plus/theme-chalk/dark/css-vars'; + :root { --color-background: #E6E8EB; @@ -31,7 +33,7 @@ --color-scrollbar: rgb(147, 173, 227); } -html[data-theme='dark'] { +html.dark { //--color-main-bg: rgba(0, 5, 24, 1); //--color-main-bg: rgba(17,24,39, 1); --color-background: transparent; diff --git a/src/components/Toolbar/Toolbar.vue b/src/components/Toolbar/Toolbar.vue index 6a6a6ce0..6787ada0 100644 --- a/src/components/Toolbar/Toolbar.vue +++ b/src/components/Toolbar/Toolbar.vue @@ -74,7 +74,7 @@ watch([() => settingStore.showToolbar, () => headerRef], n => { - + diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts index 9af9a37c..f8956fc9 100644 --- a/src/hooks/useTheme.ts +++ b/src/hooks/useTheme.ts @@ -10,7 +10,7 @@ export default function useTheme() { } else { settingStore.theme = settingStore.theme === 'light' ? 'dark' : 'light' } - document.documentElement.setAttribute('data-theme', settingStore.theme) + document.documentElement.className = settingStore.theme } return {