persist color-scheme pref to localStorage

mythz · mythz · commit 4989aacca43f · 2023-01-19T13:07:37.000+08:00
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en">
   <head>
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
diff --git a/src/components/DarkModeToggle.vue b/src/components/DarkModeToggle.vue
@@ -20,10 +20,10 @@ let isDark = ref(html?.classList.contains('dark'))
 function toggleDark() {
     if (isDark.value) {
         html?.classList.remove('dark')
-        isDark.value = false
     } else {
         html?.classList.add('dark')
-        isDark.value = true
     }
+    isDark.value = !isDark.value
+    localStorage.setItem('color-scheme', isDark.value ? 'dark' : 'light')
 }
 </script>
diff --git a/src/main.ts b/src/main.ts
@@ -4,6 +4,13 @@ import './tailwind.css'
 import App from './demo/App.vue'
 import VueTw from '.'
 
+const colorScheme = localStorage.getItem('color-scheme')
+if (colorScheme === 'dark') {
+    document.querySelector('html')?.classList.add('dark')
+} else {
+    document.querySelector('html')?.classList.remove('dark')
+}
+
 const router = createRouter({
     history: createWebHistory(),
     routes: [],

Original file line number	Diff line number	Diff line change
`@@ -20,10 +20,10 @@ let isDark = ref(html?.classList.contains('dark'))`
`20`	`20`	`function toggleDark() {`
`21`	`21`	`if (isDark.value) {`
`22`	`22`	`html?.classList.remove('dark')`
`23`		`- isDark.value = false`
`24`	`23`	`} else {`
`25`	`24`	`html?.classList.add('dark')`
`26`		`- isDark.value = true`
`27`	`25`	`}`
	`26`	`+ isDark.value = !isDark.value`
	`27`	`+ localStorage.setItem('color-scheme', isDark.value ? 'dark' : 'light')`
`28`	`28`	`}`
`29`	`29`	`</script>`