fix: update

components/DarkToggle.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<!-- <script setup lang="ts">
 const color = useColorMode()
 
 function toggleDark() {
@@ -10,4 +10,19 @@ function toggleDark() {
   <button class="!outline-none" @click="toggleDark">
     <div class="dark:i-carbon-moon i-carbon-sun" />
   </button>
+</template> -->
+
+
+<script setup lang="ts">
+const colorMode = useColorMode()
+const onClick = () => (colorMode.value === 'light' ? (colorMode.preference = 'dark') : (colorMode.preference = 'light'))
+</script>
+
+<template>
+  <button aria-label="Color Mode" class="inline-block w-5" @click="onClick">
+    <ColorScheme placeholder="...">
+      <Icon v-if="colorMode.value === 'dark'" name="heroicons-outline:moon" class="w-5 h-5" />
+      <Icon v-else name="heroicons-outline:sun" class="w-5 h-5" />
+    </ColorScheme>
+  </button>
 </template>