diff --git a/src/runtime/components/color-mode/ColorModeButton.vue b/src/runtime/components/color-mode/ColorModeButton.vue
index f94b700e7a..40b540b3a0 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()
@@ -48,21 +45,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="{ 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>
-  </ClientOnly>
+  </UButton>
 </template>
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 39fa0eefcc..0000000000
--- a/src/runtime/vue/components/color-mode/ColorModeButton.vue
+++ /dev/null
@@ -1,57 +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,
-      '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>