From acca3a81c3096e24bff3524fbd3f12a55896c61c Mon Sep 17 00:00:00 2001
From: Percy Ma <kecrily@gmail.com>
Date: Mon, 23 May 2022 19:00:40 +0800
Subject: [PATCH] perf(a11y): add aria-checked attribute to switch

---
 .../components/VPSwitchAppearance.vue         | 41 +++----------------
 1 file changed, 5 insertions(+), 36 deletions(-)

diff --git a/src/client/theme-default/components/VPSwitchAppearance.vue b/src/client/theme-default/components/VPSwitchAppearance.vue
index 2d83ed64..ff7d7ae8 100644
--- a/src/client/theme-default/components/VPSwitchAppearance.vue
+++ b/src/client/theme-default/components/VPSwitchAppearance.vue
@@ -1,50 +1,19 @@
 <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'
 
-const toggle = typeof localStorage !== 'undefined' ? useAppearance() : () => {}
-
-function useAppearance() {
-  const query = window.matchMedia('(prefers-color-scheme: dark)')
-  const classList = document.documentElement.classList
-
-  let userPreference = localStorage.getItem(APPEARANCE_KEY) || 'auto'
-
-  let isDark = userPreference === 'auto'
-    ? query.matches
-    : userPreference === 'dark'
-
-  query.onchange = (e) => {
-    if (userPreference === 'auto') {
-      setClass((isDark = e.matches))
-    }
-  }
-
-  function toggle() {
-    setClass((isDark = !isDark))
-
-    userPreference = isDark
-      ? 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
-}
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
 </script>
 
 <template>
   <VPSwitch
     class="VPSwitchAppearance"
     aria-label="toggle dark mode"
-    @click="toggle"
+    @click="toggleDark()"
+    :aria-checked="isDark"
   >
     <VPIconSun class="sun" />
     <VPIconMoon class="moon" />