From 367d57f305c7075ba5ea1ed07e52d37e2b0fb89f Mon Sep 17 00:00:00 2001
From: LemonNeko <chheese048@gmail.com>
Date: Thu, 20 Mar 2025 20:29:57 +0800
Subject: [PATCH] style(stage-web): disable color animation when dynamic theme
 enabled (#88)

---
 .../stage-web/src/components/Layouts/InteractiveArea.vue | 9 +++++++++
 .../src/components/Layouts/MobileInteractiveArea.vue     | 3 ++-
 apps/stage-web/uno.config.ts                             | 4 ++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/apps/stage-web/src/components/Layouts/InteractiveArea.vue b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
index a0461fad0..67a5a9467 100644
--- a/apps/stage-web/src/components/Layouts/InteractiveArea.vue
+++ b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
@@ -20,6 +20,7 @@ const showMicrophoneSelect = ref(false)
 
 const providersStore = useProvidersStore()
 const { activeProvider, activeModel } = storeToRefs(useConsciousnessStore())
+const { themeColorsHueDynamic } = storeToRefs(useSettings())
 
 const { audioInputs } = useDevicesList({ constraints: { audio: true }, requestPermissions: true })
 const { selectedAudioDevice, isAudioInputOn, selectedAudioDeviceId } = storeToRefs(useSettings())
@@ -139,6 +140,7 @@ onAfterSend(async () => {
         :class="[
           tab === 'chat' ? 'bg-primary-100 dark:bg-primary-900' : 'bg-white dark:bg-primary-950',
           tab === 'chat' ? 'text-primary-500 dark:text-primary-500' : '',
+          { 'transition-colors-none ': themeColorsHueDynamic },
         ]"
         flex="~ row"
         :checked="tab === 'chat'"
@@ -159,6 +161,7 @@ onAfterSend(async () => {
         :class="[
           tab === 'custom' ? 'bg-primary-100 dark:bg-primary-900' : 'bg-white dark:bg-primary-950',
           tab === 'custom' ? 'text-primary-500 dark:text-primary-500' : '',
+          { 'transition-colors-none ': themeColorsHueDynamic },
         ]"
         flex="~ row"
         :checked="tab === 'custom'"
@@ -179,6 +182,7 @@ onAfterSend(async () => {
         :class="[
           tab === 'clothes' ? 'bg-primary-100 dark:bg-primary-900' : 'bg-white dark:bg-primary-950',
           tab === 'clothes' ? 'text-primary-500 dark:text-primary-500' : '',
+          { 'transition-colors-none ': themeColorsHueDynamic },
         ]"
         flex="~ row"
         :checked="tab === 'clothes'"
@@ -213,6 +217,9 @@ onAfterSend(async () => {
             min-h="[100px]" max-h="[300px]" w-full
             rounded-t-xl p-4 font-medium
             outline-none transition="all duration-250 ease-in-out placeholder:all placeholder:duration-250 placeholder:ease-in-out"
+            :class="{
+              'transition-colors-none placeholder:transition-colors-none': themeColorsHueDynamic,
+            }"
             @submit="handleSend"
           />
         </div>
@@ -222,6 +229,7 @@ onAfterSend(async () => {
       <button
         bg="complementary-100 hover:complementary-200 dark:complementary-800 dark:hover:complementary-700"
         transition="all duration-250 ease-in-out"
+        :class="{ 'transition-colors-none': themeColorsHueDynamic }"
         text="complementary-400"
         mb-6 flex cursor-pointer items-center justify-center gap-2 rounded-full px-4 py-2
         @click="handleLoadWhisper"
@@ -267,6 +275,7 @@ onAfterSend(async () => {
         <label
           bg="complementary-100 hover:complementary-200 dark:complementary-800 dark:hover:complementary-700"
           transition="all duration-250 ease-in-out"
+          :class="{ 'transition-colors-none': themeColorsHueDynamic }"
           text="complementary-400"
           mb-6 flex cursor-pointer items-center justify-center gap-2 rounded-full px-4 py-2
         >
diff --git a/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue b/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
index 08774f6ee..e9ff178ce 100644
--- a/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
+++ b/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
@@ -18,7 +18,7 @@ const { activeProvider, activeModel } = storeToRefs(useConsciousnessStore())
 
 // const { audioInputs } = useDevicesList({ constraints: { audio: true }, requestPermissions: true })
 // const { selectedAudioDevice, isAudioInputOn, selectedAudioDeviceId } = storeToRefs(useSettings())
-const { isAudioInputOn, selectedAudioDeviceId } = storeToRefs(useSettings())
+const { isAudioInputOn, selectedAudioDeviceId, themeColorsHueDynamic } = storeToRefs(useSettings())
 const { send, onAfterSend } = useChatStore()
 const { t } = useI18n()
 
@@ -96,6 +96,7 @@ onMounted(() => {
           max-h="[10lh]" min-h="[1lh]"
           w-full resize-none overflow-y-scroll rounded-xl p-2 font-medium outline-none
           transition="all duration-250 ease-in-out placeholder:all placeholder:duration-250 placeholder:ease-in-out"
+          :class="{ 'transition-colors-none placeholder:transition-colors-none': themeColorsHueDynamic }"
           @submit="handleSend"
         />
       </div>
diff --git a/apps/stage-web/uno.config.ts b/apps/stage-web/uno.config.ts
index d1a75c088..5f4969087 100644
--- a/apps/stage-web/uno.config.ts
+++ b/apps/stage-web/uno.config.ts
@@ -87,6 +87,10 @@ export default defineConfig({
         '--un-background-opacity': parsedColor?.cssColor?.alpha ?? parsedColor?.alpha ?? 1,
       }
     }],
+    ['transition-colors-none', {
+      'transition-property': 'color, background-color, border-color, text-color',
+      'transition-duration': '0s',
+    }],
   ],
   theme: {
     colors: {