fix: Fixed Dark Mode sync with system preferences (#61)

Author: cwandev

src/App.vue

@@ -2,6 +2,7 @@
 import { storeToRefs } from 'pinia'
 import useAppStore from '@/stores/modules/app'
 import useRouteTransitionNameStore from '@/stores/modules/routeTransitionName'
+import useAutoThemeSwitcher from '@/hooks/useAutoThemeSwitcher'
 
 useHead({
   title: 'Vue3 Vant Mobile',
@@ -22,6 +23,12 @@ const { mode } = storeToRefs(appStore)
 
 const routeTransitionNameStore = useRouteTransitionNameStore()
 const { routeTransitionName } = storeToRefs(routeTransitionNameStore)
+
+const { initializeThemeSwitcher } = useAutoThemeSwitcher(appStore)
+
+onMounted(() => {
+  initializeThemeSwitcher()
+})
 </script>
 
 <template>

src/hooks/useAutoThemeSwitcher.ts

@@ -0,0 +1,26 @@
+import type { AppStore } from '@/stores/modules/app'
+
+export default function useAutoThemeSwitcher(appStore: AppStore) {
+  const handleAttributeChange = () => {
+    const rootElement = document.documentElement
+    if (rootElement.classList.contains('dark'))
+      appStore.swithMode('dark')
+    else
+      appStore.swithMode('light')
+  }
+
+  const observerOptions = {
+    attributes: true,
+    attributeFilter: ['class'],
+  }
+
+  const observer = new MutationObserver(handleAttributeChange)
+
+  const targetElement = document.querySelector('html')
+
+  const initializeThemeSwitcher = () => {
+    observer.observe(targetElement, observerOptions)
+  }
+
+  return { initializeThemeSwitcher }
+}

src/stores/modules/app.ts

@@ -1,6 +1,10 @@
 import { defineStore } from 'pinia'
 import type { ConfigProviderTheme } from 'vant'
 
+export interface AppStore {
+  swithMode: (val: ConfigProviderTheme) => void
+}
+
 const prefersDark
 = window.matchMedia
 && window.matchMedia('(prefers-color-scheme: dark)').matches

src/views/index.vue

@@ -11,6 +11,14 @@ definePage({
 const appStore = useAppStore()
 const checked = ref<boolean>(isDark.value)
 
+watch(
+  () => isDark.value,
+  (newMode) => {
+    checked.value = newMode
+  },
+  { immediate: true },
+)
+
 function toggle() {
   toggleDark()
   appStore.swithMode(isDark.value ? 'dark' : 'light')