fix: dark mode

cuixueshe · Jan 23, 2024 · 0ca1992 · 0ca1992
1 parent 18ecd9d
commit 0ca1992
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/apps/client/components/Navbar/index.vue b/apps/client/components/Navbar/index.vue
@@ -9,6 +9,21 @@ const toggleDarkMode = () => {
   document.documentElement.classList.toggle('dark')
 }
 
+const setDarkMode = (state = false) => {
+  if (state) {
+    document.documentElement.setAttribute("data-theme", "dark");
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.setAttribute("data-theme", "light");       
+    document.documentElement.classList.remove('dark')
+  }
+}
+
+onMounted(() => {
+  const state = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+  setDarkMode(state)
+})
+
 </script>
 
 <template>