59 lines
2.3 KiB
Markdown
59 lines
2.3 KiB
Markdown
# Navbar 主题样式优化计划
|
||
|
||
## 目标
|
||
将 Navbar 组件中的硬编码颜色统一替换为 CSS 变量，确保主题切换时样式完全一致且易于维护。
|
||
|
||
## 当前问题
|
||
1. 亮色模式使用硬编码颜色（如 `white`、`#555`、`#667eea`）
|
||
2. 暗色模式有大量硬编码覆盖（如 `#1e293b`、`rgb(139, 92, 246)`）
|
||
3. 颜色值分散在多处，修改困难
|
||
|
||
## 修改方案
|
||
|
||
### 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`
|
||
|
||
## 验证步骤
|
||
1. 切换日间/夜间模式，确认导航栏颜色正确变化
|
||
2. 检查所有菜单项、下拉框、按钮样式一致
|
||
3. 确认暗色模式下文字可读性良好
|