From 1990d8fd4b70aa2a59c9f66c540c7f78758f4c8a Mon Sep 17 00:00:00 2001
From: Percy Ma <kecrily@gmail.com>
Date: Tue, 31 May 2022 05:49:48 +0000
Subject: [PATCH] perf(a11y): add aria-checked attribute to switch

---
 .../components/VPSwitchAppearance.vue         | 42 +++++++++++++++++--
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/client/theme-default/components/VPSwitchAppearance.vue b/src/client/theme-default/components/VPSwitchAppearance.vue
index ff7d7ae8..b0993c5c 100644
--- a/src/client/theme-default/components/VPSwitchAppearance.vue
+++ b/src/client/theme-default/components/VPSwitchAppearance.vue
@@ -1,11 +1,47 @@
 <script lang="ts" setup>
+import { APPEARANCE_KEY } from '../../shared'
 import VPSwitch from './VPSwitch.vue'
 import VPIconSun from './icons/VPIconSun.vue'
 import VPIconMoon from './icons/VPIconMoon.vue'
-import { useDark, useToggle } from '@vueuse/core'
+import { ref } from 'vue'
 
-const isDark = useDark()
-const toggleDark = useToggle(isDark)
+const { toggle, isDark } = useAppearance()
+
+const toggleDark = typeof localStorage !== 'undefined' ?  toggle: () => {}
+
+function useAppearance() {
+  const query = window.matchMedia('(prefers-color-scheme: dark)')
+  const classList = document.documentElement.classList
+
+  let userPreference = localStorage.getItem(APPEARANCE_KEY) || 'auto'
+
+  let isDark = ref(userPreference === 'auto'
+    ? query.matches
+    : userPreference === 'dark')
+
+  query.onchange = (e) => {
+    if (userPreference === 'auto') {
+      setClass((isDark.value = e.matches))
+    }
+  }
+
+  function toggle() {
+    isDark.value = !isDark.value
+    setClass(isDark.value)
+
+    userPreference = isDark.value
+      ? query.matches ? 'auto' : 'dark'
+      : query.matches ? 'light' : 'auto'
+
+    localStorage.setItem(APPEARANCE_KEY, userPreference)
+  }
+
+  function setClass(dark: boolean): void {
+    classList[dark ? 'add' : 'remove']('dark')
+  }
+
+  return { toggle, isDark }
+}
 </script>
 
 <template>