From 27bf07e39f38274204326dd5d76c79576b0a9f71 Mon Sep 17 00:00:00 2001
From: zl <whee@zlext.com>
Date: Mon, 17 Nov 2025 15:56:02 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=BB=9F=E4=B8=80=E6=98=8E=E4=BA=AE?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E6=A0=B7=E5=BC=8F=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E8=A7=86=E8=A7=89=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复明亮模式下的组件背景色问题，移除黑色背景
- 统一所有按钮和组件的灰色调，提升视觉一致性
- 加深灰色对比度，提高可读性和用户体验
- 优化声音组件、分类图标、删除按钮等样式
- 统一播放按钮、菜单按钮、滚动到顶部按钮风格
- 改进主题切换系统的CSS变量使用
- 新增数据库目录用于SQLite数据存储
---
 data/users.db                                 | Bin 0 -> 16384 bytes
 src/components/buttons/play/play.module.css   |  10 +++----
 .../buttons/unselect/unselect.module.css      |  12 ++++----
 .../categories/category/category.module.css   |   8 ++---
 src/components/sounds/sounds.module.css       |  12 ++++----
 .../theme-toggle/theme-toggle.module.css      |  16 +++++-----
 src/components/theme-toggle/theme-toggle.tsx  |  28 +++++++++---------
 .../scroll-to-top/scroll-to-top.module.css    |   8 ++---
 8 files changed, 47 insertions(+), 47 deletions(-)
 create mode 100644 data/users.db

diff --git a/data/users.db b/data/users.db
new file mode 100644
index 0000000000000000000000000000000000000000..038b7fa287c26011568e80f4adef1c8c28284b4a
GIT binary patch
literal 16384
zcmeI(O>fgM7zc2>9c3HZ!Yzksk`FzsY^$0Us5S|Su$nHkP21E#6bYhq@kT{o)+UAZ
zI3e*NxbcDbCLGbk5jSgjDdLPY{U60~?AWoM-_42AYF4|EWT(S%-;Y><+$EHf$BYp|
z5~{4IvIwd!mfMSa|Ed!t`|;j}_MId*KatI^+80$JAOHafKmY;|fB*y_009U<00O@W
zG?FQOcbB#!ztfZ9sHe86UMNQsIXGEvt{ges6r2h3NtLsuu{#65FZa~U%;jr(Ti12^
zVJm*-B$VSYJ|+H`A9t~xbvBP~z${zvGIv<Rv1+E%W)<FMrYq`}t!CD^E%ttnp3R=E
z$OL~Om}^^2movLAnC(`pzlNRrVfcPH4z7p&eg9-E{YVC$+LV`6YQm~<R^m@hw<_3?
z>o{snZ`RooX00(_Jd;VJ^hY`+-9aEP<_!KM8pdre&dW36Dyg7XXV@F6Q0+5O2Lb{R
zfB*y_009U<00Izz00bZaf&V4&il)f+<*h;_!)Ug3Pv<*nBbPp&p4UfqquDC=4hFni
zxtP8!98cb4OMSoI8NHjHxz@Anz&?0hzMnm7iOS33D0rC9<sa-D#=cQxx#D5oILsB-
zRbEv4M%00T00bZa0SG_<0uX=z1Rwwb2teQl3EW9;uPt6DTz~(+BHGmrN)V|)00Izz
c00bZa0SG_<0uX=z1R$UUR%udSi+=?80iU6oMF0Q*

literal 0
HcmV?d00001

diff --git a/src/components/buttons/play/play.module.css b/src/components/buttons/play/play.module.css
index ea64f37..7ed74fc 100644
--- a/src/components/buttons/play/play.module.css
+++ b/src/components/buttons/play/play.module.css
@@ -7,15 +7,15 @@
   font-family: var(--font-heading);
   font-size: var(--font-base);
   line-height: 0;
-  color: var(--color-neutral-200);
+  color: var(--color-foreground);
   cursor: pointer;
-  background-color: var(--color-neutral-950);
-  border: 1px solid var(--color-neutral-50);
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--color-border);
   border-radius: 100px;
   transition: 0.2s;
 
   &:hover {
-    background-color: var(--color-neutral-800);
+    background-color: var(--bg-tertiary);
   }
 
   &:not(.disabled):active {
@@ -32,7 +32,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-400);
+    outline: 2px solid var(--color-muted);
     outline-offset: 2px;
   }
 }
diff --git a/src/components/buttons/unselect/unselect.module.css b/src/components/buttons/unselect/unselect.module.css
index 7115a4f..f228e31 100644
--- a/src/components/buttons/unselect/unselect.module.css
+++ b/src/components/buttons/unselect/unselect.module.css
@@ -9,8 +9,8 @@
   line-height: 0;
   color: var(--color-foreground);
   cursor: pointer;
-  background-color: var(--color-neutral-100);
-  border: 1px solid var(--color-neutral-300);
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--color-border);
   border-radius: 100px;
   transition: 0.2s;
 
@@ -25,11 +25,11 @@
 
   &:hover,
   &:focus-visible {
-    background-color: var(--color-neutral-200);
+    background-color: var(--bg-tertiary);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-400);
+    outline: 2px solid var(--color-muted);
     outline-offset: 2px;
   }
 }
@@ -37,7 +37,7 @@
 .tooltip {
   padding: 6px 12px;
   font-size: var(--font-xsm);
-  background-color: var(--color-neutral-100);
-  border: 1px solid var(--color-neutral-200);
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--color-border);
   border-radius: 100px;
 }
diff --git a/src/components/categories/category/category.module.css b/src/components/categories/category/category.module.css
index e4f997f..d8e3130 100644
--- a/src/components/categories/category/category.module.css
+++ b/src/components/categories/category/category.module.css
@@ -12,7 +12,7 @@
     & .tail {
       width: 1px;
       height: 75px;
-      background: linear-gradient(transparent, var(--color-neutral-300));
+      background: linear-gradient(transparent, var(--color-muted));
     }
 
     & .icon {
@@ -23,10 +23,10 @@
       height: 45px;
       font-size: var(--font-md);
       background: linear-gradient(
-        var(--color-neutral-50),
-        var(--color-neutral-100)
+        var(--bg-secondary),
+        var(--bg-tertiary)
       );
-      border: 1px solid var(--color-neutral-300);
+      border: 1px solid var(--color-border);
       border-radius: 50%;
     }
   }
diff --git a/src/components/sounds/sounds.module.css b/src/components/sounds/sounds.module.css
index b60fdfe..918ff82 100644
--- a/src/components/sounds/sounds.module.css
+++ b/src/components/sounds/sounds.module.css
@@ -17,18 +17,18 @@
   font-size: var(--font-xsm);
   color: var(--color-neutral-subtle);
   cursor: pointer;
-  background-color: var(--color-neutral-50);
-  border: 1px solid var(--color-neutral-200);
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--color-border);
   border-radius: 50px;
   transition: 0.2s;
 
   &:hover,
   &:focus-visible {
-    background-color: var(--color-neutral-100);
+    background-color: var(--bg-tertiary);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-400);
+    outline: 2px solid var(--color-muted);
     outline-offset: 2px;
   }
 
@@ -42,7 +42,7 @@
     background: linear-gradient(
       90deg,
       transparent,
-      var(--color-neutral-300),
+      var(--color-muted),
       transparent
     );
     transform: translateX(-50%);
@@ -55,7 +55,7 @@
     width: 8px;
     height: 8px;
     content: '';
-    background-color: var(--color-neutral-950);
+    background-color: var(--color-foreground);
     border-radius: 50%;
   }
 }
diff --git a/src/components/theme-toggle/theme-toggle.module.css b/src/components/theme-toggle/theme-toggle.module.css
index f98d09f..87f3385 100644
--- a/src/components/theme-toggle/theme-toggle.module.css
+++ b/src/components/theme-toggle/theme-toggle.module.css
@@ -7,7 +7,7 @@
   border: none;
   border-radius: 50%;
   cursor: pointer;
-  color: var(--color-foreground, #1e293b);
+  color: var(--color-foreground);
   transition: all 0.2s ease;
   font-size: 18px;
   line-height: 1;
@@ -17,17 +17,17 @@
   top: 1rem;
   right: 1rem;
   z-index: 1000;
-  background: var(--bg-secondary, #f8fafc);
-  border: 1px solid var(--color-border, #cbd5e1);
+  background: var(--bg-secondary);
+  border: 1px solid var(--color-border);
 }
 
 .themeToggle:hover {
-  background: var(--bg-tertiary, #e2e8f0);
+  background: var(--bg-tertiary);
   transform: scale(1.05);
 }
 
 .themeToggle:focus {
-  outline: 2px solid var(--color-foreground, #1e293b);
+  outline: 2px solid var(--color-foreground);
   outline-offset: 2px;
 }
 
@@ -37,10 +37,10 @@
 
 /* 暗色主题下的特殊样式 */
 :global(.dark-theme) .themeToggle {
-  background: var(--bg-secondary, #27272a);
-  border: 1px solid var(--color-border, #52525b);
+  background: var(--bg-secondary);
+  border: 1px solid var(--color-border);
 }
 
 :global(.dark-theme) .themeToggle:hover {
-  background: var(--bg-tertiary, #3f3f46);
+  background: var(--bg-tertiary);
 }
\ No newline at end of file
diff --git a/src/components/theme-toggle/theme-toggle.tsx b/src/components/theme-toggle/theme-toggle.tsx
index 03f02f9..af9739e 100644
--- a/src/components/theme-toggle/theme-toggle.tsx
+++ b/src/components/theme-toggle/theme-toggle.tsx
@@ -52,23 +52,23 @@ export function ThemeToggle() {
 
       // 明亮主题 - 参考现代简洁设计，更干净的白色系
       root.style.setProperty('--bg-primary', '#ffffff');          // 主背景 - 纯白色
-      root.style.setProperty('--bg-secondary', '#fafbfc');        // 次要背景 - 极浅灰白
-      root.style.setProperty('--bg-tertiary', '#f6f8fa');         // 第三背景 - 浅灰白
-      root.style.setProperty('--bg-quaternary', '#e1e4e8');       // 第四背景 - 浅灰色
+      root.style.setProperty('--bg-secondary', '#f8fafc');        // 次要背景 - 浅灰白（更深一点）
+      root.style.setProperty('--bg-tertiary', '#f1f5f9');         // 第三背景 - 中浅灰（更深一点）
+      root.style.setProperty('--bg-quaternary', '#e2e8f0');       // 第四背景 - 中灰色（更深一点）
 
       // 前景色 - 明亮主题使用深色文字，确保良好对比度
-      root.style.setProperty('--color-foreground', '#24292f');    // 主前景色 - 深灰（GitHub风格）
-      root.style.setProperty('--color-foreground-subtle', '#656d76'); // 次要前景色 - 中灰色
-      root.style.setProperty('--color-foreground-subtler', '#57606a'); // 更次要前景色 - 深灰色
-      root.style.setProperty('--color-muted', '#8b949e');         // 静音色 - 灰色
-      root.style.setProperty('--color-border', '#d0d7de');        // 边框色 - 柔和浅灰
+      root.style.setProperty('--color-foreground', '#1e293b');    // 主前景色 - 深灰蓝（更深一点）
+      root.style.setProperty('--color-foreground-subtle', '#475569'); // 次要前景色 - 中深灰（更深一点）
+      root.style.setProperty('--color-foreground-subtler', '#64748b'); // 更次要前景色 - 中灰色（更深一点）
+      root.style.setProperty('--color-muted', '#94a3b8');         // 静音色 - 中灰（更深一点）
+      root.style.setProperty('--color-border', '#cbd5e1');        // 边框色 - 中浅灰（更深一点）
 
-      // 组件特定背景
-      root.style.setProperty('--component-bg', '#ffffff');        // 组件背景
-      root.style.setProperty('--component-hover', '#f3f4f6');     // 组件悬停背景
-      root.style.setProperty('--component-active', '#e5e7eb');    // 组件激活背景
-      root.style.setProperty('--modal-bg', '#ffffff');            // 模态框背景
-      root.style.setProperty('--input-bg', '#ffffff');            // 输入框背景
+      // 组件特定背景 - 明亮模式下使用浅色系
+      root.style.setProperty('--component-bg', '#ffffff');        // 组件背景 - 白色
+      root.style.setProperty('--component-hover', '#f8fafc');     // 组件悬停背景 - 浅灰白
+      root.style.setProperty('--component-active', '#f1f5f9');    // 组件激活背景 - 中浅灰
+      root.style.setProperty('--modal-bg', '#ffffff');            // 模态框背景 - 白色
+      root.style.setProperty('--input-bg', '#ffffff');            // 输入框背景 - 白色
 
       // 直接设置body背景为白色
       body.style.backgroundColor = '#ffffff';
diff --git a/src/components/toolbar/scroll-to-top/scroll-to-top.module.css b/src/components/toolbar/scroll-to-top/scroll-to-top.module.css
index 4e11b80..009e286 100644
--- a/src/components/toolbar/scroll-to-top/scroll-to-top.module.css
+++ b/src/components/toolbar/scroll-to-top/scroll-to-top.module.css
@@ -8,18 +8,18 @@
   color: var(--color-foreground);
   pointer-events: auto;
   cursor: pointer;
-  background-color: var(--color-neutral-100);
-  border: 1px solid var(--color-neutral-300);
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--color-border);
   border-radius: 50%;
   transition: 0.2s;
 
   &:focus-visible {
-    outline: 2px solid var(--color-neutral-400);
+    outline: 2px solid var(--color-muted);
     outline-offset: 2px;
   }
 
   &:hover,
   &:focus-visible {
-    background-color: var(--color-neutral-200);
+    background-color: var(--bg-tertiary);
   }
 }