update: style

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); }
     }
 }
 

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{

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>

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

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

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>

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); }

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 {