From 669f9a075c168bd096490500073c5666276c71f3 Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 10 Jun 2022 21:41:12 +0200
Subject: [PATCH] docs: use mutation observer to check dark mode class

---
 docs/components/home/Home.vue | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/docs/components/home/Home.vue b/docs/components/home/Home.vue
index 85606398..dd3ee9d8 100644
--- a/docs/components/home/Home.vue
+++ b/docs/components/home/Home.vue
@@ -3,11 +3,32 @@ import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import Blobity from 'blobity'
 import Intro from './flows/Intro.vue'
 
-const dark = useDark({
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
+const usesDark = useDark({
+  storageKey: 'vuepress-color-scheme',
   selector: 'html',
 })
 
-const breakpoints = useBreakpoints(breakpointsTailwind)
+const dark = ref(false)
+
+onMounted(() => {
+  const html = document.getElementsByTagName('html')![0]
+
+  usesDark.value = html.classList.contains('dark')
+
+  const observer = new MutationObserver((mutations) => {
+    for (const m of mutations) {
+      dark.value = html.classList.contains('dark')
+    }
+  })
+
+  observer.observe(html, {
+    attributes: true,
+    attributeOldValue: true,
+    attributeFilter: ['class'],
+  })
+})
 
 onMounted(() => {
   if (!breakpoints.isSmaller('md')) {