From ac2e866e78d8a5c93a2bba3b8c2e0f0b82a7f73d Mon Sep 17 00:00:00 2001
From: junkwarrior87 <115852752+junkwarrior87@users.noreply.github.com>
Date: Sat, 8 Mar 2025 21:43:15 +0800
Subject: [PATCH] feat(stage-web): make the color theme slider more intuitive
 (#59)

* feat(stage-web): make the color theme slider more intuitive

* use oklch

* use parameters of 400 instead of 600 in oklch
---
 .../src/pages/settings/themes/index.vue        | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/apps/stage-web/src/pages/settings/themes/index.vue b/apps/stage-web/src/pages/settings/themes/index.vue
index 7ef499be2..5d1556c8c 100644
--- a/apps/stage-web/src/pages/settings/themes/index.vue
+++ b/apps/stage-web/src/pages/settings/themes/index.vue
@@ -46,12 +46,12 @@ const settings = useSettings()
       </button>
     </template>
     <div p-4>
-      <div class="flex items-center justify-between">
+      <div class="flex items-center gap-8">
         <div class="flex items-center gap-1 text-sm font-medium">
           Primary color
         </div>
 
-        <input v-model="settings.themeColorsHue" type="range" min="0" max="360" step="1">
+        <input v-model="settings.themeColorsHue" type="range" min="0" max="360" step="1" class="theme-hue-slider">
       </div>
       <div mt-4 h-10 w-full flex overflow-hidden rounded-lg>
         <div bg="primary-50" class="primary-color-bar">
@@ -111,6 +111,20 @@ const settings = useSettings()
 .primary-color-bar {
   @apply w-full h-full flex-1 flex items-center justify-center;
 }
+
+.theme-hue-slider {
+  @apply flex-1 w-32 h-2 rounded-full appearance-none;
+  background: linear-gradient(
+    to right,
+    oklch(85% 0.2 0),
+    oklch(85% 0.2 60),
+    oklch(85% 0.2 120),
+    oklch(85% 0.2 180),
+    oklch(85% 0.2 240),
+    oklch(85% 0.2 300),
+    oklch(85% 0.2 360)
+  );
+}
 </style>
 
 <route lang="yaml">