Cahnge some layouts and structuter

2025-07-12 23:23:32 +07:00
parent a4d6f25d44
commit fb0e7a22ba
4 changed files with 75 additions and 13 deletions
@@ -0,0 +1,25 @@
+<script setup>
+const colorMode = useColorMode()
+defineProps({
+  isCompact: Boolean,
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+})
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+</script>
+
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <button @click="isDark = !isDark" class="btn btn-neutral">Toggle Theme</button>
+
+    <template #fallback>
+      <button class="btn btn-neutral">Loading...</button>
+    </template>
+  </ClientOnly>
+</template>