From 36543162a26d449ff8dc826288d22cbed4adb835 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Sat, 15 Mar 2025 21:09:53 +0800
Subject: [PATCH] fix(stage-web|stage-tamagotchi): format

---
 .../src/renderer/src/pages/settings/index.vue |  23 +-
 .../src/pages/settings/models/index.vue       |  38 ++
 .../pages/settings/modules/consciousness.vue  |  10 +-
 .../src/pages/settings/modules/index.vue      |  10 +-
 .../src/pages/settings/modules/speech.vue     |   4 +-
 .../pages/settings/providers/elevenlabs.vue   |   4 +-
 .../src/pages/settings/providers/index.vue    |  12 +-
 .../src/pages/settings/providers/openai.vue   |   4 +-
 .../pages/settings/providers/openrouter.vue   |   4 +-
 .../src/pages/settings/themes/index.vue       | 474 +++++++++++++-----
 apps/stage-web/src/pages/settings/index.vue   |   4 +-
 .../src/pages/settings/models/index.vue       |   4 +-
 .../pages/settings/modules/consciousness.vue  |   4 +-
 .../src/pages/settings/modules/index.vue      |   4 +-
 .../src/pages/settings/modules/speech.vue     |   4 +-
 .../pages/settings/providers/elevenlabs.vue   |   4 +-
 .../src/pages/settings/providers/index.vue    |   4 +-
 .../src/pages/settings/providers/openai.vue   |   4 +-
 .../pages/settings/providers/openrouter.vue   |   4 +-
 .../src/pages/settings/themes/index.vue       |   4 +-
 20 files changed, 447 insertions(+), 176 deletions(-)
 create mode 100644 apps/stage-tamagotchi/src/renderer/src/pages/settings/models/index.vue

diff --git a/apps/stage-tamagotchi/src/renderer/src/pages/settings/index.vue b/apps/stage-tamagotchi/src/renderer/src/pages/settings/index.vue
index 4de326d54..cc7a23d0d 100644
--- a/apps/stage-tamagotchi/src/renderer/src/pages/settings/index.vue
+++ b/apps/stage-tamagotchi/src/renderer/src/pages/settings/index.vue
@@ -4,7 +4,9 @@ import { useSettings } from '@proj-airi/stage-ui/stores'
 import { useDark } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
 const { t } = useI18n()
 const { language, disableTransitions } = storeToRefs(useSettings())
 const dark = useDark()
@@ -12,19 +14,12 @@ const dark = useDark()
 function handleLanguageChange(event: Event) {
   const target = event.target as HTMLSelectElement
   language.value = target.value
-  // Send IPC message to main process for locale change
-  window.electron?.ipcRenderer.send('locale-changed', target.value)
-}
-
-// Handle window close
-function handleClose() {
-  window.electron?.ipcRenderer.send('close-settings')
 }
 </script>
 
 <template>
   <div flex="~ row" items-center gap-2>
-    <button @click="handleClose">
+    <button @click="router.back()">
       <div i-solar:alt-arrow-left-line-duotone text-2xl />
     </button>
     <h1 text-3xl>
@@ -34,7 +29,7 @@ function handleClose() {
   <div flex="~ col gap-4">
     <div flex="~ col gap-4">
       <IconItem title="Modules" description="Thinking, vision, speech synthesis, gaming, etc." icon="i-lucide:blocks" to="/settings/modules" />
-      <!-- <IconItem title="Models" description="Live2D, VRM, etc." icon="i-lucide:person-standing" to="/settings/models" /> -->
+      <IconItem title="Models" description="Live2D, VRM, etc." icon="i-lucide:person-standing" to="/settings/models" />
       <IconItem title="Providers" description="LLMs, speech providers, etc." icon="i-lucide:brain" to="/settings/providers" />
       <IconItem title="Themes" description="Customize your stage!" icon="i-lucide:paintbrush" to="/settings/themes" />
     </div>
@@ -145,8 +140,14 @@ function handleClose() {
         </div>
       </label>
     </div>
-    <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0>
-      <div text="40" i-lucide:cog translate-x-10 translate-y-10 />
+    <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+      <div v-motion text="40" i-lucide:cog />
     </div>
   </div>
 </template>
+
+<route lang="yaml">
+meta:
+  stageTransition:
+    name: slide
+</route>
diff --git a/apps/stage-tamagotchi/src/renderer/src/pages/settings/models/index.vue b/apps/stage-tamagotchi/src/renderer/src/pages/settings/models/index.vue
new file mode 100644
index 000000000..0a9ef35cc
--- /dev/null
+++ b/apps/stage-tamagotchi/src/renderer/src/pages/settings/models/index.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { WidgetStage } from '@proj-airi/stage-ui/components'
+import { useRouter } from 'vue-router'
+
+import Live2DSettings from '../../../components/Widgets/Live2DSettings.vue'
+
+const router = useRouter()
+</script>
+
+<template>
+  <div flex="~ row" items-center gap-2>
+    <button @click="router.back()">
+      <div i-solar:alt-arrow-left-line-duotone text-2xl />
+    </button>
+    <h1 relative>
+      <div absolute left-0 top-0 translate-y="[-80%]">
+        <span text="neutral-300 dark:neutral-500">Settings</span>
+      </div>
+      <div text-3xl font-semibold>
+        Models
+      </div>
+    </h1>
+  </div>
+  <div flex>
+    <WidgetStage w="50%" h="80vh" />
+    <Live2DSettings w="50%" h="80vh" />
+  </div>
+
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" i-lucide:person-standing />
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  stageTransition:
+    name: slide
+</route>
diff --git a/apps/stage-tamagotchi/src/renderer/src/pages/settings/modules/consciousness.vue b/apps/stage-tamagotchi/src/renderer/src/pages/settings/modules/consciousness.vue
index a01bfb8a4..bb8bf66c9 100644
--- a/apps/stage-tamagotchi/src/renderer/src/pages/settings/modules/consciousness.vue
+++ b/apps/stage-tamagotchi/src/renderer/src/pages/settings/modules/consciousness.vue
@@ -205,7 +205,13 @@ function updateCustomModelName(value: string) {
     </div>
   </div>
 
-  <div fixed bottom-0 right-0 z--1 class="text-neutral-100/80 dark:text-neutral-500/20">
-    <div text="40" i-lucide:ghost translate-x-10 translate-y-10 />
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" i-lucide:ghost />
   </div>
 </template>
+
+<route lang="yaml">
+meta:
+  stageTransition:
+    name: slide
+</route>
diff --git a/apps/stage-tamagotchi/src/renderer/src/pages/settings/modules/index.vue b/apps/stage-tamagotchi/src/renderer/src/pages/settings/modules/index.vue
index 1117e18ed..3ad92337b 100644
--- a/apps/stage-tamagotchi/src/renderer/src/pages/settings/modules/index.vue
+++ b/apps/stage-tamagotchi/src/renderer/src/pages/settings/modules/index.vue
@@ -120,7 +120,13 @@ const modulesList = computed<Module[]>(() => [
       :configured="module.configured"
     />
   </div>
-  <div fixed bottom-0 right-0 z--1 text="neutral-100/80 dark:neutral-500/20">
-    <div text="40" i-lucide:blocks translate-x-10 translate-y-10 />
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" i-lucide:blocks />
   </div>
 </template>
+
+<route lang="yaml">
+meta:
+  stageTransition:
+    name: slide
+</route>
diff --git a/apps/stage-tamagotchi/src/renderer/src/pages/settings/modules/speech.vue b/apps/stage-tamagotchi/src/renderer/src/pages/settings/modules/speech.vue
index f53e9b6d7..2de271768 100644
--- a/apps/stage-tamagotchi/src/renderer/src/pages/settings/modules/speech.vue
+++ b/apps/stage-tamagotchi/src/renderer/src/pages/settings/modules/speech.vue
@@ -249,7 +249,7 @@ function updateSSMLExample() {
     </div>
   </div>
 
-  <div fixed bottom-0 right-0 z--1 class="text-neutral-100/80 dark:text-neutral-500/20">
-    <div text="40" i-lucide:volume-2 translate-x-10 translate-y-10 />
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" i-lucide:volume-2 />
   </div>
 </template>
diff --git a/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/elevenlabs.vue b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/elevenlabs.vue
index df7d64dd4..46c78fb95 100644
--- a/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/elevenlabs.vue
+++ b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/elevenlabs.vue
@@ -530,7 +530,7 @@ function handleResetVoiceSettings() {
       </div>
     </div>
   </div>
-  <div fixed bottom-0 right-0 text="neutral-100/80 dark:neutral-500/20">
-    <div text="40" :class="providerMetadata?.icon" translate-x-10 translate-y-10 />
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" :class="providerMetadata?.icon" />
   </div>
 </template>
diff --git a/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/index.vue b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/index.vue
index ba23f16ef..3b4723b46 100644
--- a/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/index.vue
+++ b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/index.vue
@@ -32,11 +32,17 @@ const { allProvidersMetadata } = storeToRefs(providersStore)
       :icon="provider.icon"
       :icon-color="provider.iconColor"
       :icon-image="provider.iconImage"
-      :to="`/settings/providers/${provider.id.replace('-ai', '')}`"
+      :to="`/settings/providers/${provider.id}`"
       :configured="provider.configured"
     />
   </div>
-  <div fixed bottom-0 right-0 z--1 text="neutral-100/80 dark:neutral-500/20">
-    <div text="40" i-lucide:brain translate-x-10 translate-y-10 />
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" i-lucide:brain />
   </div>
 </template>
+
+<route lang="yaml">
+meta:
+  stageTransition:
+    name: slide
+</route>
diff --git a/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/openai.vue b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/openai.vue
index 6053d8c2a..3552ad4ae 100644
--- a/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/openai.vue
+++ b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/openai.vue
@@ -118,7 +118,7 @@ watch([apiKey, baseUrl], () => {
       </Collapsable>
     </div>
   </div>
-  <div fixed bottom-0 right-0 text="neutral-100/80 dark:neutral-500/20">
-    <div text="40" i-lobe-icons:openai translate-x-10 translate-y-10 />
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" i-lobe-icons:openai />
   </div>
 </template>
diff --git a/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/openrouter.vue b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/openrouter.vue
index 0d6b6c2cd..9326058b7 100644
--- a/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/openrouter.vue
+++ b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/openrouter.vue
@@ -122,7 +122,7 @@ watch([apiKey, baseUrl], () => {
       </Collapsable>
     </div>
   </div>
-  <div fixed bottom-0 right-0 text="neutral-100/80 dark:neutral-500/20">
-    <div text="40" :class="providerMetadata?.icon" translate-x-10 translate-y-10 />
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" :class="providerMetadata?.icon" />
   </div>
 </template>
diff --git a/apps/stage-tamagotchi/src/renderer/src/pages/settings/themes/index.vue b/apps/stage-tamagotchi/src/renderer/src/pages/settings/themes/index.vue
index b7efb68c9..3cfa89796 100644
--- a/apps/stage-tamagotchi/src/renderer/src/pages/settings/themes/index.vue
+++ b/apps/stage-tamagotchi/src/renderer/src/pages/settings/themes/index.vue
@@ -1,15 +1,137 @@
 <script setup lang="ts">
 import { Collapsable } from '@proj-airi/stage-ui/components'
 import { DEFAULT_THEME_COLORS_HUE, useSettings } from '@proj-airi/stage-ui/stores'
+import { converter } from 'culori'
+import { TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from 'radix-vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const settings = useSettings()
 
+interface ColorPreset {
+  name: string
+  description: string
+  colors: Array<{
+    hex: string
+    name: string
+  }>
+}
+
+const colorPresets: ColorPreset[] = [
+  {
+    name: 'Morandi Colors',
+    description: 'Soft, muted tones inspired by Giorgio Morandi\'s paintings',
+    colors: [
+      { hex: '#A5978B', name: 'Taupe' },
+      { hex: '#D8CAAF', name: 'Beige' },
+      { hex: '#B8B4A7', name: 'Ash Grey' },
+      { hex: '#C4BCB1', name: 'Light Taupe' },
+      { hex: '#E5DED8', name: 'Ivory' },
+      { hex: '#9A8F7D', name: 'Olive Grey' },
+      { hex: '#BEB5A7', name: 'Sand' },
+      { hex: '#C9C0B6', name: 'Warm Grey' },
+    ],
+  },
+  {
+    name: 'Monet Colors',
+    description: 'Impressionist palette inspired by Claude Monet\'s works',
+    colors: [
+      { hex: '#7A9EAF', name: 'Sky Blue' },
+      { hex: '#B8C7CC', name: 'Mist' },
+      { hex: '#D4B79C', name: 'Sand' },
+      { hex: '#8B9D77', name: 'Moss Green' },
+      { hex: '#C7D5CB', name: 'Water Lily' },
+      { hex: '#E6D0B1', name: 'Wheat' },
+      { hex: '#94A7B1', name: 'Slate Blue' },
+      { hex: '#B4C8C3', name: 'Sage' },
+    ],
+  },
+  {
+    name: 'Japanese Colors',
+    description: 'Traditional Japanese color palette',
+    colors: [
+      { hex: '#D9B48F', name: 'Tan' },
+      { hex: '#B5917A', name: 'Warm Taupe' },
+      { hex: '#8C7A6B', name: 'Umber' },
+      { hex: '#A17F5F', name: 'Coffee' },
+      { hex: '#B98C46', name: 'Bronze' },
+      { hex: '#C7A252', name: 'Gold' },
+      { hex: '#DAB300', name: 'Mustard' },
+      { hex: '#D19826', name: 'Amber' },
+    ],
+  },
+  {
+    name: 'Nordic Colors',
+    description: 'Scandinavian minimalist color scheme',
+    colors: [
+      { hex: '#9BA7B0', name: 'Nordic Blue' },
+      { hex: '#C1CBD4', name: 'Ice' },
+      { hex: '#A5ADB6', name: 'Fjord' },
+      { hex: '#8B959E', name: 'Steel' },
+      { hex: '#D4DCE4', name: 'Glacier' },
+      { hex: '#7F8A94', name: 'Slate' },
+      { hex: '#B3BCC6', name: 'Cloud' },
+      { hex: '#98A4AE', name: 'Stone' },
+    ],
+  },
+  {
+    name: 'Chinese Traditional Colors',
+    description: 'Traditional Chinese colors, derived from ancient textiles, porcelain and paintings',
+    colors: [
+      { hex: '#E4C6D0', name: '霞光红 (Rosy Dawn)' },
+      { hex: '#A61B29', name: '枣红 (Chinese Red)' },
+      { hex: '#5D513C', name: '黄栌 (Smoky Brown)' },
+      { hex: '#789262', name: '竹青 (Bamboo Green)' },
+      { hex: '#1C0D1A', name: '乌梅紫 (Dark Purple)' },
+      { hex: '#F7C242', name: '缃色 (Golden Yellow)' },
+      { hex: '#62A9DD', name: '青冥 (Azure Blue)' },
+      { hex: '#8C4B3C', name: '赭石 (Ochre)' },
+    ],
+  },
+]
+
 function resetToDefault() {
   settings.themeColorsHue = DEFAULT_THEME_COLORS_HUE
   settings.themeColorsHueDynamic = false
 }
+
+function applyPrimaryColorFromHex(color: string) {
+  // Convert hex color to OKLCH using culori's converter
+  const oklch = converter('oklch')(color)
+
+  if (!oklch)
+    return
+
+  // Extract hue from OKLCH color
+  const { h } = oklch
+
+  if (!h)
+    return
+
+  // Update theme settings
+  settings.themeColorsHue = h
+  settings.themeColorsHueDynamic = false
+}
+
+/**
+ * Check if a color is currently selected based on its hue value
+ * @param hexColor Hex color code to check
+ * @returns True if the color's hue matches the current theme hue
+ */
+function isColorSelected(hexColor: string): boolean {
+  // If dynamic coloring is enabled, no preset color is manually selected
+  if (settings.themeColorsHueDynamic)
+    return false
+
+  // Convert hex color to OKLCH
+  const oklch = converter('oklch')(hexColor)
+  if (!oklch || !oklch.h)
+    return false
+
+  // Compare hue values with a small tolerance for floating point comparison
+  const hueDifference = Math.abs(oklch.h - settings.themeColorsHue)
+  return hueDifference < 0.01 || hueDifference > 359.99
+}
 </script>
 
 <template>
@@ -26,152 +148,228 @@ function resetToDefault() {
       </div>
     </h1>
   </div>
-  <Collapsable mt-4 w-full :default="true">
-    <template #trigger="slotProps">
-      <button
-        bg="zinc-100 dark:zinc-800"
-        hover="bg-zinc-200 dark:bg-zinc-700"
-        transition="all ease-in-out duration-250"
-        w-full flex items-center gap-1.5 rounded-lg px-4 py-3 outline-none
-        class="[&_.provider-icon]:grayscale-100 [&_.provider-icon]:hover:grayscale-0"
-        @click="slotProps.setVisible(!slotProps.visible)"
-      >
-        <div flex="~ row 1" items-center gap-1.5>
-          <div
-            i-solar:pallete-2-bold-duotone class="provider-icon size-6"
-            transition="filter duration-250 ease-in-out"
-          />
-          <div>
-            Colors
+
+  <div flex-col>
+    <Collapsable mt-4 w-full :default="true">
+      <template #trigger="slotProps">
+        <button
+          bg="zinc-100 dark:zinc-800"
+          hover="bg-zinc-200 dark:bg-zinc-700"
+          transition="all ease-in-out duration-250"
+          w-full flex items-center gap-1.5 rounded-lg px-4 py-3 outline-none
+          class="[&_.provider-icon]:grayscale-100 [&_.provider-icon]:hover:grayscale-0"
+          @click="slotProps.setVisible(!slotProps.visible)"
+        >
+          <div flex="~ row 1" items-center gap-1.5>
+            <div
+              i-solar:pallete-2-bold-duotone class="provider-icon size-6"
+              transition="filter duration-250 ease-in-out"
+            />
+            <div>
+              Custom Colors
+            </div>
           </div>
-        </div>
-        <div transform transition="transform duration-250" :class="{ 'rotate-180': slotProps.visible }">
-          <div i-solar:alt-arrow-down-bold-duotone />
-        </div>
-      </button>
-    </template>
-    <div p-4>
-      <div class="flex items-center gap-8">
-        <div class="flex items-center gap-1 text-sm font-medium">
+          <div transform transition="transform duration-250" :class="{ 'rotate-180': slotProps.visible }">
+            <div i-solar:alt-arrow-down-bold-duotone />
+          </div>
+        </button>
+      </template>
+      <div p-4>
+        <div class="mb-2 text-sm font-medium">
           Primary color
         </div>
 
-        <input
-          v-model="settings.themeColorsHue"
-          type="range"
-          min="0"
-          max="360"
-          step="0.01"
-          class="theme-hue-slider"
-          :disabled="settings.themeColorsHueDynamic"
-          :class="{ 'opacity-25 cursor-not-allowed': settings.themeColorsHueDynamic }"
-        >
-      </div>
-      <div mt-4 h-10 w-full flex overflow-hidden rounded-lg>
-        <div bg="primary-50" class="primary-color-bar" text-black>
-          50
-        </div>
-        <div bg="primary-100" class="primary-color-bar" text-black>
-          100
-        </div>
-        <div bg="primary-200" class="primary-color-bar" text-black>
-          200
-        </div>
-        <div bg="primary-300" class="primary-color-bar" text-black>
-          300
-        </div>
-        <div bg="primary-400" class="primary-color-bar" text-black>
-          400
-        </div>
-        <div bg="primary-500" class="primary-color-bar" text-black>
-          500
-        </div>
-        <div bg="primary-600" class="primary-color-bar" text-white>
-          600
-        </div>
-        <div bg="primary-700" class="primary-color-bar" text-white>
-          700
-        </div>
-        <div bg="primary-800" class="primary-color-bar" text-white>
-          800
-        </div>
-        <div bg="primary-900" class="primary-color-bar" text-white>
-          900
-        </div>
-        <div bg="primary-950" class="primary-color-bar" text-white>
-          950
-        </div>
-      </div>
-
-      <div mt-4 h-10 w-full flex overflow-hidden rounded-lg class="transparency-grid">
-        <div bg="primary-500/5" class="primary-color-bar" text-black>
-          500/5
-        </div>
-        <div bg="primary-500/10" class="primary-color-bar" text-black>
-          500/10
-        </div>
-        <div bg="primary-500/20" class="primary-color-bar" text-black>
-          500/20
-        </div>
-        <div bg="primary-500/30" class="primary-color-bar" text-black>
-          500/30
-        </div>
-        <div bg="primary-500/40" class="primary-color-bar" text-black>
-          500/40
-        </div>
-        <div bg="primary-500/50" class="primary-color-bar" text-black>
-          500/50
-        </div>
-        <div bg="primary-500/60" class="primary-color-bar" text-black>
-          500/60
-        </div>
-        <div bg="primary-500/70" class="primary-color-bar" text-black>
-          500/70
-        </div>
-        <div bg="primary-500/80" class="primary-color-bar" text-black>
-          500/80
-        </div>
-        <div bg="primary-500/90" class="primary-color-bar" text-black>
-          500/90
-        </div>
-        <div bg="primary-500" class="primary-color-bar" text-black>
-          500
-        </div>
-      </div>
-      <div mt-4 class="flex items-center justify-end gap-4">
-        <label class="relative inline-flex cursor-pointer items-center">
+        <div flex="~ col gap-4">
           <input
-            v-model="settings.themeColorsHueDynamic"
-            type="checkbox"
-            class="peer sr-only"
+            v-model="settings.themeColorsHue"
+            type="range"
+            min="0"
+            max="360"
+            step="0.01"
+            class="theme-hue-slider h-10 w-full"
+            :disabled="settings.themeColorsHueDynamic"
+            :class="{ 'opacity-25 cursor-not-allowed': settings.themeColorsHueDynamic }"
           >
-          <div
-            class="peer-checked:bg-primary-500 h-6 w-11 rounded-full bg-neutral-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white dark:bg-neutral-600 after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white"
-          />
-          <span class="ml-2 text-sm font-medium">I Want It Dynamic!</span>
-        </label>
 
-        <button
-          class="rounded-md bg-neutral-100 px-3 py-1.5 text-sm transition-colors dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700"
-          @click="resetToDefault"
-        >
-          Reset to Default
-        </button>
+          <div h-10 w-full flex overflow-hidden rounded-lg>
+            <div bg="primary-50" class="primary-color-bar" text-black>
+              50
+            </div>
+            <div bg="primary-100" class="primary-color-bar" text-black>
+              100
+            </div>
+            <div bg="primary-200" class="primary-color-bar" text-black>
+              200
+            </div>
+            <div bg="primary-300" class="primary-color-bar" text-black>
+              300
+            </div>
+            <div bg="primary-400" class="primary-color-bar" text-black>
+              400
+            </div>
+            <div bg="primary-500" class="primary-color-bar" text-black>
+              500
+            </div>
+            <div bg="primary-600" class="primary-color-bar" text-white>
+              600
+            </div>
+            <div bg="primary-700" class="primary-color-bar" text-white>
+              700
+            </div>
+            <div bg="primary-800" class="primary-color-bar" text-white>
+              800
+            </div>
+            <div bg="primary-900" class="primary-color-bar" text-white>
+              900
+            </div>
+            <div bg="primary-950" class="primary-color-bar" text-white>
+              950
+            </div>
+          </div>
+
+          <div h-10 w-full flex overflow-hidden rounded-lg class="transparency-grid">
+            <div bg="primary-500/5" class="primary-color-bar" text-black>
+              500/5
+            </div>
+            <div bg="primary-500/10" class="primary-color-bar" text-black>
+              500/10
+            </div>
+            <div bg="primary-500/20" class="primary-color-bar" text-black>
+              500/20
+            </div>
+            <div bg="primary-500/30" class="primary-color-bar" text-black>
+              500/30
+            </div>
+            <div bg="primary-500/40" class="primary-color-bar" text-black>
+              500/40
+            </div>
+            <div bg="primary-500/50" class="primary-color-bar" text-black>
+              500/50
+            </div>
+            <div bg="primary-500/60" class="primary-color-bar" text-black>
+              500/60
+            </div>
+            <div bg="primary-500/70" class="primary-color-bar" text-black>
+              500/70
+            </div>
+            <div bg="primary-500/80" class="primary-color-bar" text-black>
+              500/80
+            </div>
+            <div bg="primary-500/90" class="primary-color-bar" text-black>
+              500/90
+            </div>
+            <div bg="primary-500" class="primary-color-bar" text-black>
+              500
+            </div>
+          </div>
+        </div>
+
+        <div mt-4 class="flex items-center justify-end gap-4">
+          <label class="relative inline-flex cursor-pointer items-center">
+            <input
+              v-model="settings.themeColorsHueDynamic"
+              type="checkbox"
+              class="peer sr-only"
+            >
+            <div
+              class="peer-checked:bg-primary-500 h-6 w-11 rounded-full bg-neutral-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white dark:bg-neutral-600 after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white"
+            />
+            <span class="ml-2 text-sm font-medium">I Want It Dynamic!</span>
+          </label>
+
+          <button
+            class="rounded-md bg-neutral-100 px-3 py-1.5 text-sm transition-colors dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700"
+            @click="resetToDefault"
+          >
+            Reset to Default
+          </button>
+        </div>
       </div>
-    </div>
-  </Collapsable>
-  <div fixed bottom-0 right-0 z--1 text="neutral-100/80 dark:neutral-500/20">
-    <div text="40" i-lucide:paintbrush translate-x-10 translate-y-10 />
+    </Collapsable>
+
+    <Collapsable mt-4 w-full :default="true">
+      <template #trigger="slotProps">
+        <button
+          bg="zinc-100 dark:zinc-800"
+          hover="bg-zinc-200 dark:bg-zinc-700"
+          transition="all ease-in-out duration-250"
+          w-full flex items-center gap-1.5 rounded-lg px-4 py-3 outline-none
+          class="[&_.provider-icon]:grayscale-100 [&_.provider-icon]:hover:grayscale-0"
+          @click="slotProps.setVisible(!slotProps.visible)"
+        >
+          <div flex="~ row 1" items-center gap-1.5>
+            <div
+              i-solar:magic-stick-2-bold-duotone class="provider-icon size-6"
+              transition="filter duration-250 ease-in-out"
+            />
+            <div>
+              Theme Presets
+            </div>
+          </div>
+          <div transform transition="transform duration-250" :class="{ 'rotate-180': slotProps.visible }">
+            <div i-solar:alt-arrow-down-bold-duotone />
+          </div>
+        </button>
+      </template>
+
+      <div p-4 flex="~ col gap-4">
+        <div
+          v-for="preset in colorPresets"
+          :key="preset.name"
+          flex="~ row"
+          bg="neutral-100 dark:neutral-800"
+          hover="bg-neutral-200 dark:bg-neutral-700"
+          transition="all ease-in-out duration-250"
+          cursor-pointer items-center justify-between gap-4 rounded-lg px-4 py-3
+        >
+          <div>
+            <div text-base font-medium>
+              {{ preset.name }}
+            </div>
+            <div text="sm neutral-500">
+              {{ preset.description }}
+            </div>
+          </div>
+          <div flex="~ row" gap-2>
+            <TooltipProvider v-for="color in preset.colors" :key="color.hex">
+              <TooltipRoot>
+                <TooltipTrigger>
+                  <div
+                    :style="{ backgroundColor: color.hex }"
+                    class="size-6 cursor-pointer rounded-full transition-all duration-250 ease-in-out" :class="[
+                      isColorSelected(color.hex)
+                        ? 'scale-150 z-10 mx-1'
+                        : 'hover:scale-110',
+                    ]"
+                    @click="applyPrimaryColorFromHex(color.hex)"
+                  />
+                </TooltipTrigger>
+                <TooltipPortal>
+                  <TooltipContent class="rounded-lg bg-white px-3 py-1.5 text-sm shadow-md dark:bg-neutral-800">
+                    {{ color.name }}
+                    <TooltipArrow class="fill-white dark:fill-neutral-800" />
+                  </TooltipContent>
+                </TooltipPortal>
+              </TooltipRoot>
+            </TooltipProvider>
+          </div>
+        </div>
+      </div>
+    </Collapsable>
+  </div>
+
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" i-lucide:paintbrush />
   </div>
 </template>
 
 <style>
 .primary-color-bar {
-  @apply w-full h-full flex-1 flex items-center justify-center;
+  --at-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;
+  --at-apply: rounded-lg appearance-none;
   background: linear-gradient(
     to right,
     oklch(85% 0.2 0),
@@ -184,6 +382,16 @@ function resetToDefault() {
   );
 }
 
+.theme-hue-slider::-webkit-slider-thumb {
+  --at-apply: w-2 h-12 appearance-none rounded-md bg-neutral-500/80 dark: bg-neutral-400/80 cursor-pointer shadow-md
+    border-2 border-white hover: bg-neutral-500 dark: hover: bg-neutral-400 transition-colors duration-200;
+}
+
+.theme-hue-slider::-moz-range-thumb {
+  --at-apply: w-2 h-12 bg-neutral-500/80 rounded-md dark: bg-neutral-400/80 cursor-pointer shadow-md border-2
+    border-white border-box hover: bg-neutral-500 dark: hover: bg-neutral-400 transition-colors duration-200;
+}
+
 .transparency-grid {
   background-image: linear-gradient(45deg, #ccc 25%, transparent 25%),
     linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%),
@@ -197,3 +405,9 @@ function resetToDefault() {
   background-color: #fff;
 }
 </style>
+
+<route lang="yaml">
+meta:
+  stageTransition:
+    name: slide
+</route>
diff --git a/apps/stage-web/src/pages/settings/index.vue b/apps/stage-web/src/pages/settings/index.vue
index 30735730c..cc7a23d0d 100644
--- a/apps/stage-web/src/pages/settings/index.vue
+++ b/apps/stage-web/src/pages/settings/index.vue
@@ -140,8 +140,8 @@ function handleLanguageChange(event: Event) {
         </div>
       </label>
     </div>
-    <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0>
-      <div text="40" i-lucide:cog translate-x-10 translate-y-10 />
+    <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+      <div v-motion text="40" i-lucide:cog />
     </div>
   </div>
 </template>
diff --git a/apps/stage-web/src/pages/settings/models/index.vue b/apps/stage-web/src/pages/settings/models/index.vue
index 607bf733a..0a9ef35cc 100644
--- a/apps/stage-web/src/pages/settings/models/index.vue
+++ b/apps/stage-web/src/pages/settings/models/index.vue
@@ -26,8 +26,8 @@ const router = useRouter()
     <Live2DSettings w="50%" h="80vh" />
   </div>
 
-  <div fixed bottom-0 right-0 z--1 text="neutral-100/80 dark:neutral-500/20">
-    <div text="40" i-lucide:person-standing translate-x-10 translate-y-10 />
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" i-lucide:person-standing />
   </div>
 </template>
 
diff --git a/apps/stage-web/src/pages/settings/modules/consciousness.vue b/apps/stage-web/src/pages/settings/modules/consciousness.vue
index bf6a30b02..bb8bf66c9 100644
--- a/apps/stage-web/src/pages/settings/modules/consciousness.vue
+++ b/apps/stage-web/src/pages/settings/modules/consciousness.vue
@@ -205,8 +205,8 @@ function updateCustomModelName(value: string) {
     </div>
   </div>
 
-  <div fixed bottom-0 right-0 z--1 class="text-neutral-100/80 dark:text-neutral-500/20">
-    <div text="40" i-lucide:ghost translate-x-10 translate-y-10 />
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" i-lucide:ghost />
   </div>
 </template>
 
diff --git a/apps/stage-web/src/pages/settings/modules/index.vue b/apps/stage-web/src/pages/settings/modules/index.vue
index 13b8480e4..3ad92337b 100644
--- a/apps/stage-web/src/pages/settings/modules/index.vue
+++ b/apps/stage-web/src/pages/settings/modules/index.vue
@@ -120,8 +120,8 @@ const modulesList = computed<Module[]>(() => [
       :configured="module.configured"
     />
   </div>
-  <div fixed bottom-0 right-0 z--1 text="neutral-100/80 dark:neutral-500/20">
-    <div text="40" i-lucide:blocks translate-x-10 translate-y-10 />
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" i-lucide:blocks />
   </div>
 </template>
 
diff --git a/apps/stage-web/src/pages/settings/modules/speech.vue b/apps/stage-web/src/pages/settings/modules/speech.vue
index f53e9b6d7..2de271768 100644
--- a/apps/stage-web/src/pages/settings/modules/speech.vue
+++ b/apps/stage-web/src/pages/settings/modules/speech.vue
@@ -249,7 +249,7 @@ function updateSSMLExample() {
     </div>
   </div>
 
-  <div fixed bottom-0 right-0 z--1 class="text-neutral-100/80 dark:text-neutral-500/20">
-    <div text="40" i-lucide:volume-2 translate-x-10 translate-y-10 />
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" i-lucide:volume-2 />
   </div>
 </template>
diff --git a/apps/stage-web/src/pages/settings/providers/elevenlabs.vue b/apps/stage-web/src/pages/settings/providers/elevenlabs.vue
index df7d64dd4..46c78fb95 100644
--- a/apps/stage-web/src/pages/settings/providers/elevenlabs.vue
+++ b/apps/stage-web/src/pages/settings/providers/elevenlabs.vue
@@ -530,7 +530,7 @@ function handleResetVoiceSettings() {
       </div>
     </div>
   </div>
-  <div fixed bottom-0 right-0 text="neutral-100/80 dark:neutral-500/20">
-    <div text="40" :class="providerMetadata?.icon" translate-x-10 translate-y-10 />
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" :class="providerMetadata?.icon" />
   </div>
 </template>
diff --git a/apps/stage-web/src/pages/settings/providers/index.vue b/apps/stage-web/src/pages/settings/providers/index.vue
index 13d8652c8..3b4723b46 100644
--- a/apps/stage-web/src/pages/settings/providers/index.vue
+++ b/apps/stage-web/src/pages/settings/providers/index.vue
@@ -36,8 +36,8 @@ const { allProvidersMetadata } = storeToRefs(providersStore)
       :configured="provider.configured"
     />
   </div>
-  <div fixed bottom-0 right-0 z--1 text="neutral-100/80 dark:neutral-500/20">
-    <div text="40" i-lucide:brain translate-x-10 translate-y-10 />
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" i-lucide:brain />
   </div>
 </template>
 
diff --git a/apps/stage-web/src/pages/settings/providers/openai.vue b/apps/stage-web/src/pages/settings/providers/openai.vue
index 6053d8c2a..3552ad4ae 100644
--- a/apps/stage-web/src/pages/settings/providers/openai.vue
+++ b/apps/stage-web/src/pages/settings/providers/openai.vue
@@ -118,7 +118,7 @@ watch([apiKey, baseUrl], () => {
       </Collapsable>
     </div>
   </div>
-  <div fixed bottom-0 right-0 text="neutral-100/80 dark:neutral-500/20">
-    <div text="40" i-lobe-icons:openai translate-x-10 translate-y-10 />
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" i-lobe-icons:openai />
   </div>
 </template>
diff --git a/apps/stage-web/src/pages/settings/providers/openrouter.vue b/apps/stage-web/src/pages/settings/providers/openrouter.vue
index 0d6b6c2cd..9326058b7 100644
--- a/apps/stage-web/src/pages/settings/providers/openrouter.vue
+++ b/apps/stage-web/src/pages/settings/providers/openrouter.vue
@@ -122,7 +122,7 @@ watch([apiKey, baseUrl], () => {
       </Collapsable>
     </div>
   </div>
-  <div fixed bottom-0 right-0 text="neutral-100/80 dark:neutral-500/20">
-    <div text="40" :class="providerMetadata?.icon" translate-x-10 translate-y-10 />
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" :class="providerMetadata?.icon" />
   </div>
 </template>
diff --git a/apps/stage-web/src/pages/settings/themes/index.vue b/apps/stage-web/src/pages/settings/themes/index.vue
index 7d7eb8a06..3cfa89796 100644
--- a/apps/stage-web/src/pages/settings/themes/index.vue
+++ b/apps/stage-web/src/pages/settings/themes/index.vue
@@ -358,8 +358,8 @@ function isColorSelected(hexColor: string): boolean {
     </Collapsable>
   </div>
 
-  <div fixed bottom-0 right-0 z--1 text="neutral-100/80 dark:neutral-500/20">
-    <div text="40" i-lucide:paintbrush translate-x-10 translate-y-10 />
+  <div text="neutral-100/50 dark:neutral-500/20" pointer-events-none fixed bottom-0 right-0 translate-x-10 translate-y-10>
+    <div text="40" i-lucide:paintbrush />
   </div>
 </template>