diff --git a/data/users.db b/data/users.db
new file mode 100644
index 0000000..038b7fa
Binary files /dev/null and b/data/users.db differ
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);
   }
 }