From c1e5d5e544b8304657a5a2cef12caae7f89653e5 Mon Sep 17 00:00:00 2001
From: Moshe Tanzer <tanzermt@gmail.com>
Date: Thu, 6 Nov 2025 17:02:51 +0200
Subject: [PATCH 1/8] feat: remove clientonly

---
 .../components/color-mode/ColorModeButton.vue | 28 ++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/runtime/components/color-mode/ColorModeButton.vue b/src/runtime/components/color-mode/ColorModeButton.vue
index f94b700e7a..bcb2f8cdd0 100644
--- a/src/runtime/components/color-mode/ColorModeButton.vue
+++ b/src/runtime/components/color-mode/ColorModeButton.vue
@@ -48,21 +48,17 @@ const isDark = computed({
 </script>
 
 <template>
-  <ClientOnly v-if="!colorMode?.forced">
-    <UButton
-      v-bind="{
-        ...buttonProps,
-        'icon': props.icon || (isDark ? appConfig.ui.icons.dark : appConfig.ui.icons.light),
-        'aria-label': isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark'),
-        ...$attrs
-      }"
-      @click="isDark = !isDark"
-    />
-
-    <template #fallback>
-      <slot name="fallback">
-        <div class="size-8" />
-      </slot>
+  <UButton
+    v-bind="{
+      ...buttonProps,
+      'aria-label': isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark'),
+      ...$attrs
+    }"
+    @click="isDark = !isDark"
+  >
+    <template #leading>
+      <UIcon class="hidden dark:inline" :name="appConfig.ui.icons.dark" />
+      <UIcon class="inline dark:hidden" :name="appConfig.ui.icons.light" />
     </template>
-  </ClientOnly>
+  </UButton>
 </template>

From 182d8e6ceaafd1061a3aa1a58a7c28988075dc7e Mon Sep 17 00:00:00 2001
From: Moshe Tanzer <tanzermt@gmail.com>
Date: Mon, 10 Nov 2025 15:15:13 +0200
Subject: [PATCH 2/8] refactor(ColorModeButton): remove unused slot definition
 from ColorModeButton

---
 src/runtime/components/color-mode/ColorModeButton.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/runtime/components/color-mode/ColorModeButton.vue b/src/runtime/components/color-mode/ColorModeButton.vue
index bcb2f8cdd0..8a891dcfda 100644
--- a/src/runtime/components/color-mode/ColorModeButton.vue
+++ b/src/runtime/components/color-mode/ColorModeButton.vue
@@ -27,9 +27,6 @@ const props = withDefaults(defineProps<ColorModeButtonProps>(), {
   color: 'neutral',
   variant: 'ghost'
 })
-defineSlots<{
-  fallback(props?: {}): any
-}>()
 
 const { t } = useLocale()
 const colorMode = useColorMode()

From c1bc7b076d9e6d29d81d1d274182e58232a68c87 Mon Sep 17 00:00:00 2001
From: Moshe Tanzer <tanzermt@gmail.com>
Date: Mon, 10 Nov 2025 15:33:16 +0200
Subject: [PATCH 3/8] feat: add vue color mode with correct ui for icons

---
 src/runtime/vue/components/color-mode/ColorModeButton.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/runtime/vue/components/color-mode/ColorModeButton.vue b/src/runtime/vue/components/color-mode/ColorModeButton.vue
index 39fa0eefcc..944431078e 100644
--- a/src/runtime/vue/components/color-mode/ColorModeButton.vue
+++ b/src/runtime/vue/components/color-mode/ColorModeButton.vue
@@ -48,10 +48,14 @@ const isDark = computed({
   <UButton
     v-bind="{
       ...buttonProps,
-      'icon': props.icon || (isDark ? appConfig.ui.icons.dark : appConfig.ui.icons.light),
       'aria-label': isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark'),
       ...$attrs
     }"
     @click="isDark = !isDark"
-  />
+  >
+    <template #leading="{ ui }">
+      <UIcon :class="ui.leadingIcon({ class: props.ui?.trailingIcon, active })" class="hidden dark:inline" :name="appConfig.ui.icons.dark" />
+      <UIcon :class="ui.leadingIcon({ class: props.ui?.trailingIcon, active })" class="inline dark:hidden" :name="appConfig.ui.icons.light" />
+    </template>
+  </UButton>
 </template>

From 892310633a3d9e23c7b2abfc92223b8b7d387789 Mon Sep 17 00:00:00 2001
From: Moshe Tanzer <tanzermt@gmail.com>
Date: Mon, 10 Nov 2025 15:33:56 +0200
Subject: [PATCH 4/8] fix(ColorModeButton): update leading icon template to use
 ui class binding

---
 src/runtime/components/color-mode/ColorModeButton.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/runtime/components/color-mode/ColorModeButton.vue b/src/runtime/components/color-mode/ColorModeButton.vue
index 8a891dcfda..0011234858 100644
--- a/src/runtime/components/color-mode/ColorModeButton.vue
+++ b/src/runtime/components/color-mode/ColorModeButton.vue
@@ -53,9 +53,9 @@ const isDark = computed({
     }"
     @click="isDark = !isDark"
   >
-    <template #leading>
-      <UIcon class="hidden dark:inline" :name="appConfig.ui.icons.dark" />
-      <UIcon class="inline dark:hidden" :name="appConfig.ui.icons.light" />
+    <template #leading="{ ui }">
+      <UIcon :class="ui.leadingIcon({ class: props.ui?.trailingIcon, active })" class="hidden dark:inline" :name="appConfig.ui.icons.dark" />
+      <UIcon :class="ui.leadingIcon({ class: props.ui?.trailingIcon, active })" class="inline dark:hidden" :name="appConfig.ui.icons.light" />
     </template>
   </UButton>
 </template>

From 8aaddd2966177e0212cbfc1ca8deaf0324e9849c Mon Sep 17 00:00:00 2001
From: Moshe Tanzer <tanzermt@gmail.com>
Date: Mon, 10 Nov 2025 15:38:39 +0200
Subject: [PATCH 5/8] fix(ColorModeButton): remove unused 'active' parameter
 from leading icon class binding

---
 src/runtime/components/color-mode/ColorModeButton.vue     | 4 ++--
 src/runtime/vue/components/color-mode/ColorModeButton.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/runtime/components/color-mode/ColorModeButton.vue b/src/runtime/components/color-mode/ColorModeButton.vue
index 0011234858..50fcb1f004 100644
--- a/src/runtime/components/color-mode/ColorModeButton.vue
+++ b/src/runtime/components/color-mode/ColorModeButton.vue
@@ -54,8 +54,8 @@ const isDark = computed({
     @click="isDark = !isDark"
   >
     <template #leading="{ ui }">
-      <UIcon :class="ui.leadingIcon({ class: props.ui?.trailingIcon, active })" class="hidden dark:inline" :name="appConfig.ui.icons.dark" />
-      <UIcon :class="ui.leadingIcon({ class: props.ui?.trailingIcon, active })" class="inline dark:hidden" :name="appConfig.ui.icons.light" />
+      <UIcon :class="ui.leadingIcon({ class: props.ui?.trailingIcon })" class="hidden dark:inline" :name="appConfig.ui.icons.dark" />
+      <UIcon :class="ui.leadingIcon({ class: props.ui?.trailingIcon })" class="inline dark:hidden" :name="appConfig.ui.icons.light" />
     </template>
   </UButton>
 </template>
diff --git a/src/runtime/vue/components/color-mode/ColorModeButton.vue b/src/runtime/vue/components/color-mode/ColorModeButton.vue
index 944431078e..90b2cb5501 100644
--- a/src/runtime/vue/components/color-mode/ColorModeButton.vue
+++ b/src/runtime/vue/components/color-mode/ColorModeButton.vue
@@ -54,8 +54,8 @@ const isDark = computed({
     @click="isDark = !isDark"
   >
     <template #leading="{ ui }">
-      <UIcon :class="ui.leadingIcon({ class: props.ui?.trailingIcon, active })" class="hidden dark:inline" :name="appConfig.ui.icons.dark" />
-      <UIcon :class="ui.leadingIcon({ class: props.ui?.trailingIcon, active })" class="inline dark:hidden" :name="appConfig.ui.icons.light" />
+      <UIcon :class="ui.leadingIcon({ class: props.ui?.trailingIcon })" class="hidden dark:inline" :name="appConfig.ui.icons.dark" />
+      <UIcon :class="ui.leadingIcon({ class: props.ui?.trailingIcon })" class="inline dark:hidden" :name="appConfig.ui.icons.light" />
     </template>
   </UButton>
 </template>

From 31d6f9639c329659d92bd0eb7d7126466e425572 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 17 Nov 2025 11:42:04 +0100
Subject: [PATCH 6/8] Update
 src/runtime/vue/components/color-mode/ColorModeButton.vue

Co-authored-by: vercel[bot] <35613825+vercel[bot]@users.noreply.github.com>
---
 src/runtime/vue/components/color-mode/ColorModeButton.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/runtime/vue/components/color-mode/ColorModeButton.vue b/src/runtime/vue/components/color-mode/ColorModeButton.vue
index 90b2cb5501..5e9623f29c 100644
--- a/src/runtime/vue/components/color-mode/ColorModeButton.vue
+++ b/src/runtime/vue/components/color-mode/ColorModeButton.vue
@@ -54,8 +54,8 @@ const isDark = computed({
     @click="isDark = !isDark"
   >
     <template #leading="{ ui }">
-      <UIcon :class="ui.leadingIcon({ class: props.ui?.trailingIcon })" class="hidden dark:inline" :name="appConfig.ui.icons.dark" />
-      <UIcon :class="ui.leadingIcon({ class: props.ui?.trailingIcon })" class="inline dark:hidden" :name="appConfig.ui.icons.light" />
+      <UIcon :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" class="hidden dark:inline" :name="appConfig.ui.icons.dark" />
+      <UIcon :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" class="inline dark:hidden" :name="appConfig.ui.icons.light" />
     </template>
   </UButton>
 </template>

From f7610e0a4d006d70dc8d2524533ad18913169f98 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 17 Nov 2025 12:34:49 +0100
Subject: [PATCH 7/8] fix: remove ColorModeButton override for vue

---
 .../components/color-mode/ColorModeButton.vue | 61 -------------------
 1 file changed, 61 deletions(-)
 delete mode 100644 src/runtime/vue/components/color-mode/ColorModeButton.vue

diff --git a/src/runtime/vue/components/color-mode/ColorModeButton.vue b/src/runtime/vue/components/color-mode/ColorModeButton.vue
deleted file mode 100644
index 5e9623f29c..0000000000
--- a/src/runtime/vue/components/color-mode/ColorModeButton.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script lang="ts">
-import type { ButtonProps } from '../../../types'
-
-export interface ColorModeButtonProps extends Omit<ButtonProps, 'color' | 'variant'> {
-  /**
-   * @defaultValue 'neutral'
-   */
-  color?: ButtonProps['color']
-  /**
-   * @defaultValue 'ghost'
-   */
-  variant?: ButtonProps['variant']
-}
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useForwardProps } from 'reka-ui'
-import { reactiveOmit } from '@vueuse/core'
-import { useAppConfig, useColorMode } from '#imports'
-import { useLocale } from '../../../composables/useLocale'
-import UButton from '../../../components/Button.vue'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<ColorModeButtonProps>(), {
-  color: 'neutral',
-  variant: 'ghost'
-})
-
-const { t } = useLocale()
-const colorMode = useColorMode()
-const appConfig = useAppConfig()
-
-const buttonProps = useForwardProps(reactiveOmit(props, 'icon'))
-
-const isDark = computed({
-  get() {
-    return colorMode.value === 'dark'
-  },
-  set(_isDark: boolean) {
-    colorMode.preference = _isDark ? 'dark' : 'light'
-  }
-})
-</script>
-
-<template>
-  <UButton
-    v-bind="{
-      ...buttonProps,
-      'aria-label': isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark'),
-      ...$attrs
-    }"
-    @click="isDark = !isDark"
-  >
-    <template #leading="{ ui }">
-      <UIcon :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" class="hidden dark:inline" :name="appConfig.ui.icons.dark" />
-      <UIcon :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" class="inline dark:hidden" :name="appConfig.ui.icons.light" />
-    </template>
-  </UButton>
-</template>

From a5499e93abf6498316815ed98e0d4f2351c53aa1 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 17 Nov 2025 12:34:55 +0100
Subject: [PATCH 8/8] fix: use `leadingIcon`

---
 src/runtime/components/color-mode/ColorModeButton.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/color-mode/ColorModeButton.vue b/src/runtime/components/color-mode/ColorModeButton.vue
index 50fcb1f004..40b540b3a0 100644
--- a/src/runtime/components/color-mode/ColorModeButton.vue
+++ b/src/runtime/components/color-mode/ColorModeButton.vue
@@ -54,8 +54,8 @@ const isDark = computed({
     @click="isDark = !isDark"
   >
     <template #leading="{ ui }">
-      <UIcon :class="ui.leadingIcon({ class: props.ui?.trailingIcon })" class="hidden dark:inline" :name="appConfig.ui.icons.dark" />
-      <UIcon :class="ui.leadingIcon({ class: props.ui?.trailingIcon })" class="inline dark:hidden" :name="appConfig.ui.icons.light" />
+      <UIcon :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" class="hidden dark:inline" :name="appConfig.ui.icons.dark" />
+      <UIcon :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" class="inline dark:hidden" :name="appConfig.ui.icons.light" />
     </template>
   </UButton>
 </template>