feat: 全局主题切换(浅色/深色/跟随系统)

- CSS 变量驱动的主题系统,所有颜色响应 data-theme 属性
- 新增语义化色彩 heading/secondary/tertiary,替换硬编码 text-white/text-gray-*
- 右上角三态主题按钮(自动/浅色/深色),全局可用无需登录
- layout.tsx 内联脚本防闪烁
- 修复个人中心页面溢出无法滚动
This commit is contained in:
2026-02-26 15:15:32 +08:00
parent 69dc78300e
commit 12279117f3
18 changed files with 186 additions and 92 deletions
+41 -13
View File
@@ -3,24 +3,52 @@
:root {
--background: #030712;
--foreground: #f3f4f6;
--surface: #111827;
--elevated: #1f2937;
--inset: #0a0f1a;
--border: #1f2937;
--subtle: #374151;
--muted: #6b7280;
--dim: #4b5563;
--accent: #10b981;
--accent-hover: #059669;
--heading: #ffffff;
--secondary: #d1d5db;
--tertiary: #9ca3af;
}
[data-theme="light"] {
--background: #f8fafc;
--foreground: #1e293b;
--surface: #ffffff;
--elevated: #f1f5f9;
--inset: #e2e8f0;
--border: #e2e8f0;
--subtle: #cbd5e1;
--muted: #64748b;
--dim: #94a3b8;
--accent: #059669;
--accent-hover: #047857;
--heading: #0f172a;
--secondary: #334155;
--tertiary: #64748b;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-surface: #111827;
--color-elevated: #1f2937;
--color-inset: #0a0f1a;
--color-border: #1f2937;
--color-subtle: #374151;
--color-muted: #6b7280;
--color-dim: #4b5563;
--color-accent: #10b981;
--color-accent-hover: #059669;
--color-surface: var(--surface);
--color-elevated: var(--elevated);
--color-inset: var(--inset);
--color-border: var(--border);
--color-subtle: var(--subtle);
--color-muted: var(--muted);
--color-dim: var(--dim);
--color-accent: var(--accent);
--color-accent-hover: var(--accent-hover);
--color-heading: var(--heading);
--color-secondary: var(--secondary);
--color-tertiary: var(--tertiary);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);