feat(admin): 添加深色主题支持

- 新增主题切换功能,支持浅色、深色和跟随系统三种模式
- 创建主题管理组合式函数 useTheme 和 CSS 变量定义
- 在所有视图组件中应用 CSS 变量以实现主题适配
- 在布局头部添加主题切换按钮,支持循环切换主题
- 更新 .gitignore 添加 .trae 文件忽略
This commit is contained in:
anghunk
2026-01-27 11:07:13 +08:00
parent 61f2223825
commit ba8349b04c
12 changed files with 411 additions and 220 deletions

View File

@@ -0,0 +1,63 @@
:root {
/* Light Theme (Default) */
--bg-body: #f5f5f5;
--bg-card: #ffffff;
--bg-header: #24292f;
--bg-sider: #f6f8fa;
--bg-input: #ffffff;
--bg-hover: #eaeef2;
--bg-active: #d0ebff;
--bg-select: #24292f; /* Header select bg */
--text-primary: #24292f;
--text-secondary: #57606a;
--text-inverse: #ffffff;
--text-link: #0969da;
--border-color: #d0d7de;
--border-input: #d0d7de;
--border-header: #57606a;
--color-success: #1a7f37;
--color-warning: #9a6700;
--color-danger: #d1242f;
--chart-line: #0ea5e9;
--chart-area-start: rgba(56, 189, 248, 0.80);
--chart-area-end: rgba(56, 189, 248, 0.2);
--shadow-card: 0 1px 3px rgba(0,0,0,0.1);
--shadow-login: 0 18px 45px rgba(15, 23, 42, 0.12);
}
:root.dark {
/* Dark Theme */
--bg-body: #0d1117;
--bg-card: #161b22;
--bg-header: #161b22;
--bg-sider: #010409;
--bg-input: #0d1117;
--bg-hover: #21262d;
--bg-active: #1f6feb33; /* Semi-transparent blue */
--bg-select: #161b22;
--text-primary: #c9d1d9;
--text-secondary: #8b949e;
--text-inverse: #f0f6fc;
--text-link: #58a6ff;
--border-color: #30363d;
--border-input: #30363d;
--border-header: #30363d;
--color-success: #3fb950;
--color-warning: #d29922;
--color-danger: #f85149;
--chart-line: #38bdf8;
--chart-area-start: rgba(56, 189, 248, 0.50);
--chart-area-end: rgba(56, 189, 248, 0.1);
--shadow-card: 0 1px 3px rgba(0,0,0,0.5);
--shadow-login: 0 18px 45px rgba(0, 0, 0, 0.4);
}