From a41f347154e2a5ac147f4f70e8c095aa6e29e870 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Sat, 15 Mar 2025 15:35:47 +0800
Subject: [PATCH] feat(stage-web): transition follow primary color

---
 apps/stage-web/src/App.vue | 32 +++++++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/apps/stage-web/src/App.vue b/apps/stage-web/src/App.vue
index 4302c0a93..566866cc8 100644
--- a/apps/stage-web/src/App.vue
+++ b/apps/stage-web/src/App.vue
@@ -3,7 +3,7 @@ import { useSettings } from '@proj-airi/stage-ui/stores/settings'
 import { StageTransitionGroup } from '@proj-airi/ui-transitions'
 import { useDark } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { watch } from 'vue'
+import { computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterView } from 'vue-router'
 
@@ -11,6 +11,28 @@ const i18n = useI18n()
 const settings = storeToRefs(useSettings())
 const isDark = useDark()
 
+const primaryColor = computed(() => {
+  return isDark.value
+    ? `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${0})) 70%, oklch(50% 0 360))`
+    : `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${0})) 90%, oklch(90% 0 360))`
+})
+
+const secondaryColor = computed(() => {
+  return isDark.value
+    ? `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${180})) 70%, oklch(50% 0 360))`
+    : `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${180})) 90%, oklch(90% 0 360))`
+})
+
+const tertiaryColor = computed(() => {
+  return isDark.value
+    ? `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${60})) 70%, oklch(50% 0 360))`
+    : `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${60})) 90%, oklch(90% 0 360))`
+})
+
+const colors = computed(() => {
+  return [primaryColor.value, secondaryColor.value, tertiaryColor.value, isDark.value ? '#121212' : '#FFFFFF']
+})
+
 watch(settings.language, () => {
   i18n.locale.value = settings.language.value
 })
@@ -26,10 +48,10 @@ watch(settings.themeColorsHueDynamic, () => {
 
 <template>
   <StageTransitionGroup
-    primary-color="#FF57C8"
-    secondary-color="#946BFF"
-    tertiary-color="#121212"
-    :colors="!isDark ? ['#FF57C8', '#946BFF', '#64BCFF', '#FFFFFF'] : ['#FF57C8', '#946BFF', '#64BCFF', '#121212']"
+    :primary-color="primaryColor"
+    :secondary-color="secondaryColor"
+    :tertiary-color="tertiaryColor"
+    :colors="colors"
     :z-index="100"
     :disable-transitions="settings.disableTransitions.value"
   >