init project

components/ThemeSwitcher.vue

@@ -0,0 +1,28 @@
+<script setup>
+const colorMode = useColorMode();
+
+const isDark = computed({
+  get() {
+    return colorMode.value === "dark";
+  },
+  set(_isDark) {
+    colorMode.preference = _isDark ? "dark" : "light";
+  },
+});
+</script>
+
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <div class="w-8 h-8 flex items-center justify-center cursor-pointer">
+      <UIcon
+        class="w-8 h-8"
+        :name="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
+        @click="isDark = !isDark"
+      />
+    </div>
+
+    <template #fallback>
+      <div class="size-20" />
+    </template>
+  </ClientOnly>
+</template>