feat: 全局主题切换(浅色/深色/跟随系统)
- CSS 变量驱动的主题系统,所有颜色响应 data-theme 属性 - 新增语义化色彩 heading/secondary/tertiary,替换硬编码 text-white/text-gray-* - 右上角三态主题按钮(自动/浅色/深色),全局可用无需登录 - layout.tsx 内联脚本防闪烁 - 修复个人中心页面溢出无法滚动
This commit is contained in:
+41
-13
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user