fix(dark): storing a user's preference 🐛

Author: cwandev

src/App.vue

@@ -11,12 +11,11 @@ import { localStorage } from '@/utils/local-storage'
 import { useStore } from '@/stores'
 
 const store = useStore()
-const res = localStorage.get('theme')
-const theme = ref<ConfigProviderTheme>(res)
+const theme = ref<ConfigProviderTheme>('light')
 const mode = computed(() => store.mode)
 
 watch(mode, (val) => {
-  if(val === 'dark') {
+  if(val === 'dark' || localStorage.get('theme') === 'dark') {
     theme.value = 'dark'
     document.querySelector('html')
     .setAttribute('data-theme', 'dark')

src/stores/index.ts

@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
 export const useStore = defineStore({
 	id: 'index',
 	state: () => ({
-		mode: 'light'
+		// light || dark
+		mode: ''
 	})
 })

src/views/index.vue

@@ -25,23 +25,18 @@ import { useStore } from '@/stores'
 import { localStorage } from '@/utils/local-storage'
 
 const store = useStore()
-const res = localStorage.get('theme')
-const tem = res === 'dark' ? true: false
-const checked = ref<boolean>(tem)
+const themeStore = localStorage.get('theme')
+const checked = ref<boolean>(themeStore === 'dark' ? true: false)
 
-watch(checked,() => {
-  if(checked.value) {
+watch(checked,(val) => {
+  if(val) {
     store.mode = 'dark'
-    document.querySelector('html')
-    .setAttribute('data-theme', 'dark')
-    localStorage.set('theme', store.mode)
+    localStorage.set('theme', 'dark')
   } else {
     store.mode = 'light'
-    document.querySelector('html')
-    .setAttribute('data-theme', 'light')
-    localStorage.set('theme', store.mode)
+    localStorage.set('theme', 'light')
   }
-}, { immediate: true })
+})
 </script>
 
 <style lang="less" scoped>