From 0986f5e4b743199cfa38fc240294399d41060a46 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 2 Oct 2024 15:33:28 +0200
Subject: [PATCH] docs(Header): display color mode button

---
 docs/app/components/Header.vue                |  2 +-
 .../components/color-mode/ColorModeButton.vue | 38 +++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 docs/app/components/color-mode/ColorModeButton.vue

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>