From b551c1be319255a1e39f39fd8dfd01fd9b91eb8f Mon Sep 17 00:00:00 2001
From: junkwarrior87 <115852752+junkwarrior87@users.noreply.github.com>
Date: Sat, 8 Mar 2025 22:16:51 +0800
Subject: [PATCH] feat(stage-web): make the logo also follow the color theme
 (#61)

---
 apps/stage-web/src/components/Layouts/HeaderLink.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/stage-web/src/components/Layouts/HeaderLink.vue b/apps/stage-web/src/components/Layouts/HeaderLink.vue
index 2754b3fbe..53b9b4575 100644
--- a/apps/stage-web/src/components/Layouts/HeaderLink.vue
+++ b/apps/stage-web/src/components/Layouts/HeaderLink.vue
@@ -14,13 +14,19 @@ const dark = useDark()
     gap-2 px-2 text-nowrap text-2xl outline-none
   >
     <template v-if="dark">
-      <img :src="LogoDark" h-8 w-8>
+      <img :src="LogoDark" h-8 w-8 class="theme-colored">
     </template>
     <template v-else>
-      <img :src="Logo" h-8 w-8>
+      <img :src="Logo" h-8 w-8 class="theme-colored">
     </template>
     <div font-cute>
       <span>アイリ</span>
     </div>
   </RouterLink>
 </template>
+
+<style scoped>
+.theme-colored {
+  filter: hue-rotate(calc(var(--theme-colors-hue, 0) * 1deg));
+}
+</style>