From 8c48debc0677247dc1a25d570e370d48da724b90 Mon Sep 17 00:00:00 2001
From: Benny Samir Hierl <bennysamir@posteo.de>
Date: Wed, 9 Feb 2022 20:47:27 +0100
Subject: [PATCH] small adjustment on dark mode

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>
---
 src/components/Header.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 33f44f8..65d4671 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -2,7 +2,7 @@
   <header
     class="mb-2 flex flex-row items-center justify-end space-x-2 opacity-60"
   >
-    <div @click="toggleMode">
+    <div @click="() => toggleDark()">
       <IconLightDark class="h-6 w-6 cursor-pointer" />
     </div>
     <!-- <div><IconMenu class="h-8 w-8 cursor-pointer"></IconMenu></div> -->
@@ -10,11 +10,8 @@
 </template>
 
 <script setup lang="ts">
-import { useColorMode } from '@vueuse/core'
+import { useDark, useToggle } from '@vueuse/core'
 import { IconLightDark, IconMenu } from '@/components/icons'
-const mode = useColorMode()
 
-const toggleMode = () => {
-  mode.value = mode.value === 'dark' ? 'light' : 'dark'
-}
+const toggleDark = useToggle(useDark())
 </script>