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>