From 3079f1a5058cf21460f3c1b25c7f023566164263 Mon Sep 17 00:00:00 2001
From: xfy <i@rua.plus>
Date: Tue, 26 May 2026 11:11:44 +0800
Subject: [PATCH] =?UTF-8?q?ThemeToggle=EF=BC=9A=E7=94=A8=20SVG=20=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E6=9B=BF=E6=8D=A2=20emoji=EF=BC=8C=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E7=81=B0=E8=89=B2=E8=83=8C=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 亮色模式使用太阳 SVG 图标
- 暗色模式使用月亮 SVG 图标
- 移除按钮的灰色背景，改为 hover 透明度变化

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ...24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg |  1 +
 ...24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg |  1 +
 public/style.css                              | 25 +++++--------------
 src/theme.rs                                  | 14 ++++++++---
 4 files changed, 19 insertions(+), 22 deletions(-)
 create mode 100644 public/icons/bedtime_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg
 create mode 100644 public/icons/wb_sunny_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg

diff --git a/public/icons/bedtime_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg b/public/icons/bedtime_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg
new file mode 100644
index 0000000..cb9ef5e
--- /dev/null
+++ b/public/icons/bedtime_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M484-80q-84 0-157.5-32t-128-86.5Q144-253 112-326.5T80-484q0-146 93-257.5T410-880q-18 99 11 193.5T521-521q71 71 165.5 100T880-410q-26 144-138 237T484-80Zm0-80q88 0 163-44t118-121q-86-8-163-43.5T464-465q-61-61-97-138t-43-163q-77 43-120.5 118.5T160-484q0 135 94.5 229.5T484-160Zm-20-305Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/wb_sunny_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg b/public/icons/wb_sunny_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg
new file mode 100644
index 0000000..a229aa4
--- /dev/null
+++ b/public/icons/wb_sunny_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M440-800v-120h80v120h-80Zm0 760v-120h80v120h-80Zm360-400v-80h120v80H800Zm-760 0v-80h120v80H40Zm708-252-56-56 70-72 58 58-72 70ZM198-140l-58-58 72-70 56 56-70 72Zm564 0-70-72 56-56 72 70-58 58ZM212-692l-72-70 58-58 70 72-56 56Zm98 382q-70-70-70-170t70-170q70-70 170-70t170 70q70 70 70 170t-70 170q-70 70-170 70t-170-70Zm283.5-56.5Q640-413 640-480t-46.5-113.5Q547-640 480-640t-113.5 46.5Q320-547 320-480t46.5 113.5Q413-320 480-320t113.5-46.5ZM480-480Z"/></svg>
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 5732ece..18c74f3 100644
--- a/public/style.css
+++ b/public/style.css
@@ -280,12 +280,18 @@
   .table {
     display: table;
   }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
   .h-\[60px\] {
     height: 60px;
   }
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
   .w-full {
     width: 100%;
   }
@@ -368,9 +374,6 @@
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
-  .bg-gray-200 {
-    background-color: var(--color-gray-200);
-  }
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
@@ -583,13 +586,6 @@
       }
     }
   }
-  .hover\:bg-gray-300 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-300);
-      }
-    }
-  }
   .hover\:bg-red-700 {
     &:hover {
       @media (hover: hover) {
@@ -775,15 +771,6 @@
       }
     }
   }
-  .dark\:hover\:bg-gray-600 {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--color-gray-600);
-        }
-      }
-    }
-  }
   .dark\:hover\:text-\[\#dadadb\] {
     @media (prefers-color-scheme: dark) {
       &:hover {
diff --git a/src/theme.rs b/src/theme.rs
index 0b5e291..5d871b2 100644
--- a/src/theme.rs
+++ b/src/theme.rs
@@ -73,12 +73,20 @@ pub fn ThemeToggle() -> Element {
 
     rsx! {
         button {
-            class: "theme-toggle p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors",
+            class: "theme-toggle p-2 rounded-full hover:opacity-80 transition-opacity",
             onclick: move |_| theme.set(theme().toggle()),
             if theme() == Theme::Dark {
-                "🌙"
+                img {
+                    src: "/icons/bedtime_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg",
+                    alt: "Dark mode",
+                    class: "w-6 h-6",
+                }
             } else {
-                "☀️"
+                img {
+                    src: "/icons/wb_sunny_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg",
+                    alt: "Light mode",
+                    class: "w-6 h-6",
+                }
             }
         }
     }