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 {