From 06c1d9fb3b7e3b3f775f00d6d77d0bb352e14fbd Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Mon, 26 Feb 2024 14:01:19 +0100
Subject: [PATCH] improve theme picker

---
 src/components/header/ThemePicker.vue | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/header/ThemePicker.vue b/src/components/header/ThemePicker.vue
index ea9dbe7..de17721 100644
--- a/src/components/header/ThemePicker.vue
+++ b/src/components/header/ThemePicker.vue
@@ -22,7 +22,17 @@ watch(isDark, () => {
       container: 'z-30',
     }"
   >
-    <UButton trailing-icon="i-ph-paint-brush-bold" variant="ghost" color="primary" size="sm" />
+    <template #default="{ open }">
+      <UButton
+        color="gray"
+        variant="ghost"
+        square
+        :class="[open && 'bg-gray-50 dark:bg-gray-800']"
+        aria-label="Color picker"
+      >
+        <UIcon name="i-ph-paint-brush-bold" class="w-5 h-5 text-primary-500 dark:text-primary-400" />
+      </UButton>
+    </template>
 
     <template #panel>
       <div class="p-2">
@@ -33,9 +43,9 @@ watch(isDark, () => {
               square
               :ui="{
                 color: {
-                  gray: {
-                    solid: 'bg-gray-200 dark:bg-stone-800',
-                    ghost: 'hover:bg-gray-50 dark:hover:bg-stone-800/50',
+                  white: {
+                    solid: 'ring-0 bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800',
+                    ghost: 'hover:bg-gray-50 dark:hover:bg-gray-800/50',
                   },
                 },
               }"