diff --git a/docs/app/components/Header.vue b/docs/app/components/Header.vue
index b99f75f8..98232720 100644
--- a/docs/app/components/Header.vue
+++ b/docs/app/components/Header.vue
@@ -32,7 +32,7 @@ const navigation = inject<Ref<NavItem[]>>('navigation')
         <UContentSearchButton />
       </UTooltip>
 
-      <!-- <UColorModeButton /> -->
+      <ColorModeButton />
 
       <UButton
         color="gray"
diff --git a/docs/app/components/color-mode/ColorModeButton.vue b/docs/app/components/color-mode/ColorModeButton.vue
new file mode 100644
index 00000000..9cb8d06e
--- /dev/null
+++ b/docs/app/components/color-mode/ColorModeButton.vue
@@ -0,0 +1,38 @@
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <UButton
+      :icon="isDark ? appConfig.ui.icons.dark : appConfig.ui.icons.light"
+      color="gray"
+      variant="ghost"
+      v-bind="{
+        ...$attrs
+      }"
+      :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
+      @click="isDark = !isDark"
+    />
+
+    <template #fallback>
+      <div class="w-8 h-8" />
+    </template>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false
+})
+
+const colorMode = useColorMode()
+const appConfig = useAppConfig()
+
+// Computed
+
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+</script>