From 8fd5505eecb0636d9164d776d0f2c78bf53a4162 Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 10 Jun 2022 19:01:43 +0200
Subject: [PATCH] docs: use mutation observer to check dark mode class

---
 docs/components/home/Banner.vue      |  2 +-
 docs/components/home/flows/Intro.vue | 20 +++++++++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/docs/components/home/Banner.vue b/docs/components/home/Banner.vue
index 37f2145d..2b3fcd0e 100644
--- a/docs/components/home/Banner.vue
+++ b/docs/components/home/Banner.vue
@@ -8,7 +8,7 @@ const npmData = await $fetch('https://api.npmjs.org/downloads/point/last-month/@
 </script>
 
 <template>
-  <div class="w-full dark:(bg-black text-white border-white) border-black border-b-1">
+  <div class="w-full dark:(bg-black text-white border-white) border-black border-y-1">
     <div class="max-w-full md:max-w-11/12 m-auto py-4 md:py-12 <md:(dark:border-t-1 border-white)">
       <div class="grid md:grid-cols-3 gap-3 text-center <md:divide-y md:divide-x dark:divide-white divide-black">
         <div class="grid grid-rows-auto gap-2 py-4 md:py-0">
diff --git a/docs/components/home/flows/Intro.vue b/docs/components/home/flows/Intro.vue
index 2700e90c..1c3120fe 100644
--- a/docs/components/home/flows/Intro.vue
+++ b/docs/components/home/flows/Intro.vue
@@ -8,8 +8,22 @@ import Heart from '~icons/mdi/heart'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
-const dark = useDark({
-  selector: 'html',
+const dark = ref(false)
+
+onMounted(() => {
+  const html = document.getElementsByTagName('html')![0]
+
+  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'],
+  })
 })
 
 const initialEdges = [
@@ -206,7 +220,7 @@ const scrollTo = () => {
 
 <template>
   <VueFlow ref="el" class="dark:bg-black bg-white transition-colors duration-200 ease-in-out">
-    <Background variant="lines" :size="0.7" :gap="100" />
+    <Background variant="lines" :pattern-color="dark ? '#ffffff' : '#000000'" :size="0.7" :gap="100" />
 
     <template #node-box="props">
       <template v-if="props.id === 'intro'">