make colormodebutton themeable

zunder-ai · Sep 12, 2024 · 954eab4 · 954eab4
1 parent 821f501
commit 954eab4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/.playground/pages/index.vue b/.playground/pages/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <div>
   <ZChatSidebar v-model:open="isOpen" side="right">
     <template #content>
       <div class="flex items-center">
@@ -87,7 +88,8 @@
                     variant="ghost"
                     icon="i-heroicons-cog-6-tooth"
                 />
-                <ZColorModeButton />
+                <ZColorModeButton light-icon="i-solar:sun-line-duotone"
+                dark-icon="i-solar:moon-stars-line-duotone" />
                 <div class="md:hidden">
                     <UButton
                     variant="ghost"
@@ -111,6 +113,7 @@
         </template>
     </ZChatPage>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">

diff --git a/components/elements/ColorModeButton.client.vue b/components/elements/ColorModeButton.client.vue
@@ -1,18 +1,35 @@
 <script setup lang="ts">
+import type { ButtonColor, ButtonVariant } from '#ui/types'
+
+interface Props {
+  lightIcon?: string
+  darkIcon?: string
+  color?: ButtonColor
+  variant?: ButtonVariant
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  lightIcon: 'i-heroicons-sun-20-solid',
+  darkIcon: 'i-heroicons-moon-20-solid',
+  color: 'gray',
+  variant: 'ghost'
+})
+
 const colorMode = useColorMode()
 
 const isDark = computed(() => colorMode.value === 'dark')
 
 const toggleColorMode = () => {
   colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
 }
+
 </script>
 
 <template>
   <UButton
-    :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
-    color="gray"
-    variant="ghost"
+    :icon="isDark ? props.darkIcon : props.lightIcon"
+    :color="props.color"
+    :variant="props.variant"
     aria-label="Toggle color mode"
     @click="toggleColorMode"
   />