2.3 KiB
2.3 KiB
Navbar 主题样式优化计划
目标
将 Navbar 组件中的硬编码颜色统一替换为 CSS 变量，确保主题切换时样式完全一致且易于维护。
当前问题
- 亮色模式使用硬编码颜色（如
white、#555、#667eea） - 暗色模式有大量硬编码覆盖（如
#1e293b、rgb(139, 92, 246)） - 颜色值分散在多处，修改困难
修改方案
1. 亮色模式 → CSS 变量映射
| 硬编码值 | CSS 变量 | 用途 |
|---|---|---|
white |
var(--card-background) |
容器背景 |
#555 |
var(--text-secondary) |
菜单项文字 |
#667eea |
var(--primary-color) |
主色调 |
rgb(139, 92, 246) |
var(--primary-color) |
主色调（统一） |
#333 |
var(--text-primary) |
用户名文字 |
#1a1a1a |
var(--text-primary) |
标题文字 |
#8c8c8c |
var(--text-muted) |
次要文字 |
#666 |
var(--text-secondary) |
副标题文字 |
#4a4a4a |
var(--text-primary) |
功能特性文字 |
#eee |
var(--border-color) |
分隔线 |
#e8e8e8 |
var(--border-color) |
分隔线 |
#e5e7eb |
var(--border-color) |
进度条背景 |
#999 |
var(--text-muted) |
搜索框前缀 |
#ccc |
var(--text-muted) |
浅灰色文字 |
#374151 |
var(--text-primary) |
等级标题 |
#9ca3af |
var(--text-muted) |
等级经验值 |
2. 暗色模式简化
由于 CSS 变量已在 [data-theme="dark"] 中定义，以下规则可以完全移除：
.navbar-container背景 → 由var(--card-background)处理.ant-menu-item颜色 → 由var(--primary-color)处理.username-text颜色 → 由var(--primary-color)处理- 所有
rgb(139, 92, 246)→ 替换为var(--primary-color) - 所有
#1e293b→ 替换为var(--card-background) - 所有
#334155→ 替换为var(--border-color)
3. 需要保留的暗色模式规则
仅保留 CSS 变量无法处理的特殊情况：
- 渐变背景（需要调整暗色下的渐变）
rgba透明效果- Ant Design 组件覆盖（需要
!important）
影响文件
chunyu_project_react/src/components/Navbar/Navbar.css
验证步骤
- 切换日间/夜间模式，确认导航栏颜色正确变化
- 检查所有菜单项、下拉框、按钮样式一致
- 确认暗色模式下文字可读性良好