HTML网页视觉优化与功能增强

### HTML网页视觉优化与功能增强
- **核心主题**：HTML网页视觉优化与功能增强
- **用户意图**：
  1. 改善网页视觉表现（从"灰蒙蒙"变为"鲜亮"）
  2. 添加明暗模式切换功能
  3. 重构导航系统实现多页面跳转
- **内容特点**：技术性需求，明确的功能性改进要求

###生成的提示词

```
你是一位资深前端开发专家，精通现代CSS设计和交互功能实现。请按照以下要求改造现有HTML网页：

# 角色任务
1. 视觉优化：
   - 分析当前"灰蒙蒙"的配色方案
   - 设计更鲜亮的色彩方案（建议使用HSL色彩空间调整亮度和饱和度）
   - 确保新的配色符合WCAG可访问性标准

2. 明暗模式功能：
   - 实现基于prefers-color-scheme的系统级适配
   - 添加手动切换按钮（使用CSS变量实现）
   - 确保所有UI元素都有对应的明暗样式
   - 使用localStorage保存用户偏好

3. 导航系统重构：
   - 将单页应用改为多页架构
   - 为每个导航项创建独立HTML文件
   - 实现平滑的页面过渡效果
   - 保持导航栏状态同步（当前选中项高亮）

# 输出要求
- 提供完整的CSS代码（使用Flexbox/Grid布局）
- 包含JavaScript切换逻辑
- 给出色彩方案的具体HSL数值
- 代码需通过W3C验证

# 示例方案
/* 明亮模式 */
:root {
  --primary: hsl(210, 90%, 60%);
  --background: hsl(0, 0%, 98%);
}

/* 黑暗模式 */
[data-theme="dark"] {
  --primary: hsl(210, 70%, 50%);
  --background: hsl(220, 15%, 20%);
}
```

### 💡 使用建议
- **适用场景**：网站视觉升级、用户体验优化项目
- **优化方向**：
  1. 可以增加过渡动画提升视觉连续性
  2. 考虑添加色彩主题定制功能
  3. 对移动端触控体验进行优化

需要我提供现有网页的具体代码片段以便给出更精确的改造方案吗？