From 2f5e05f93793afcc7dd529c179f30fc6ccf73222 Mon Sep 17 00:00:00 2001
From: Vick Scarlet <scarlet_vick@outlook.com>
Date: Sat, 15 Aug 2026 22:38:31 +0800
Subject: [PATCH] update: style

---
 apps/web/src/components/ThemeToggle.css | 22 +++++++++++++++++-----
 apps/web/src/containers/Achv.css        |  2 +-
 apps/web/src/containers/Achv.tsx        |  2 +-
 apps/web/src/containers/Alloc.tsx       |  2 +-
 apps/web/src/containers/Chara.tsx       |  2 +-
 apps/web/src/containers/Home.tsx        |  4 ++--
 apps/web/src/styles/colors.css          |  1 +
 apps/web/src/styles/common.css          |  1 +
 8 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/ThemeToggle.css b/apps/web/src/components/ThemeToggle.css
index 834e305..06cf487 100644
--- a/apps/web/src/components/ThemeToggle.css
+++ b/apps/web/src/components/ThemeToggle.css
@@ -1,5 +1,4 @@
 .theme-svg {
-    --svg-color: oklch(from var(--text-color, var(--base-text-color)) calc(l + 0.2) c h);
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     transform-origin: center;
     .sun-center, .sun-beams, .mask-cutter-group {
@@ -7,13 +6,26 @@
         transform-origin: center;
     }
     .mask-cutter-group { transform: translate(0.75rem, -0.75rem); }
-    .sun-center { 
+    .sun-center {
         transition: fill 0.2s ease-in-out;
-        fill: var(--svg-color); 
+        fill: var(--style-color);
     }
-    .sun-beams { 
+    .sun-beams {
         transition: stroke 0.2s ease-in-out;
-        stroke: var(--svg-color); 
+        stroke: var(--style-color);
+    }
+}
+button.theme-toggle-btn {
+    @media (hover: hover) {
+        &:hover .theme-svg{
+            .sun-center { fill: var(--style-background); }
+            .sun-beams { stroke: var(--style-background); }
+        }
+    }
+
+    &:active .theme-svg{
+        .sun-center { fill: var(--style-background); }
+        .sun-beams { stroke: var(--style-background); }
     }
 }
 
diff --git a/apps/web/src/containers/Achv.css b/apps/web/src/containers/Achv.css
index 3b4a573..4d6f077 100644
--- a/apps/web/src/containers/Achv.css
+++ b/apps/web/src/containers/Achv.css
@@ -105,7 +105,7 @@
                     margin: -0.0625rem;
                     transform: translateZ(1px); 
                     background: var(--base-background-color);
-                    opacity: 0.8;
+                    opacity: 0.5;
                 }
                 &.colled {
                     &::before{
diff --git a/apps/web/src/containers/Achv.tsx b/apps/web/src/containers/Achv.tsx
index 8568c66..304fb83 100644
--- a/apps/web/src/containers/Achv.tsx
+++ b/apps/web/src/containers/Achv.tsx
@@ -34,7 +34,7 @@ export function Achv() {
     return (
         <div className="screen achv">
             <div className="controls">
-                <button className="info">排行榜</button>
+                <button className="secondary">排行榜</button>
                 <button className="primary" onClick={goHome}>
                     返回
                 </button>
diff --git a/apps/web/src/containers/Alloc.tsx b/apps/web/src/containers/Alloc.tsx
index c38b42e..e8649d9 100644
--- a/apps/web/src/containers/Alloc.tsx
+++ b/apps/web/src/containers/Alloc.tsx
@@ -121,7 +121,7 @@ export function Alloc() {
                 ))}
             </ul>
             <div className="controls">
-                <button className="info" onClick={() => random()}>
+                <button className="secondary" onClick={() => random()}>
                     随机分配
                 </button>
                 <button
diff --git a/apps/web/src/containers/Chara.tsx b/apps/web/src/containers/Chara.tsx
index 08b4a1b..c6ed45d 100644
--- a/apps/web/src/containers/Chara.tsx
+++ b/apps/web/src/containers/Chara.tsx
@@ -109,7 +109,7 @@ export function Chara() {
                 ))}
             </ul>
             <div className="controls">
-                <button className="info" onClick={puller}>
+                <button className="secondary" onClick={puller}>
                     都不是
                 </button>
                 <button
diff --git a/apps/web/src/containers/Home.tsx b/apps/web/src/containers/Home.tsx
index 9d850f4..8d45d79 100644
--- a/apps/web/src/containers/Home.tsx
+++ b/apps/web/src/containers/Home.tsx
@@ -19,10 +19,10 @@ export default function Home() {
                     </button>
                 </div>
                 <div>
-                    <button className="info" onClick={goAchv}>
+                    <button className="secondary" onClick={goAchv}>
                         成就
                     </button>
-                    <button className="info" onClick={goAchv}>
+                    <button className="secondary" onClick={goAchv}>
                         感谢
                     </button>
                 </div>
diff --git a/apps/web/src/styles/colors.css b/apps/web/src/styles/colors.css
index 505d5c6..93d3ea3 100644
--- a/apps/web/src/styles/colors.css
+++ b/apps/web/src/styles/colors.css
@@ -12,6 +12,7 @@
     --color-info: light-dark(#454ad3, #b5b7ff);
     --color-error: light-dark(#e42b2b, #ff6969);
     --color-primary: var(--color-success);
+    --color-secondary: var(--color-info);
 }
 
 .grade-0 { --grade-color: var(--color-grade-0); }
diff --git a/apps/web/src/styles/common.css b/apps/web/src/styles/common.css
index 4af61f8..9ad6998 100644
--- a/apps/web/src/styles/common.css
+++ b/apps/web/src/styles/common.css
@@ -80,6 +80,7 @@ button {
     }
 
     &.primary { --style-color: var(--color-primary); }
+    &.secondary { --style-color: var(--color-secondary); }
     &.info { --style-color: var(--color-info); }
     &.error { --style-color: var(--color-error); }
     &.focus {