VOICEVOX 项目中键盘与音序器的暗黑模式适配优化

项目背景

VOICEVOX 是一款开源的语音合成软件，其编辑器界面包含音乐制作中常见的钢琴键盘和音序器组件。在最新版本迭代中，开发团队发现这些组件的暗黑模式显示存在明显问题，需要进行系统性的视觉优化。

问题分析

当前实现存在多个影响暗黑模式体验的技术问题：

1. 颜色值硬编码问题：多处直接使用固定颜色值而非主题变量
2. 对比度不足：浅色模式下设计的颜色在暗色背景下可读性差
3. 视觉层次混乱：边界线、背景色等缺乏统一的视觉规范

技术解决方案

颜色系统重构

1. 建立专用颜色变量：

   • 钢琴键盘：白键色、黑键色、键名文字色
   • 音序器网格：主网格线、次网格线、白键区域、黑键区域
   • 音符元素：边框色、选中状态色、无效状态色、歌词输入框

2. 动态主题适配：

   • 通过主题配置文件(default.json/dark.json)定义各模式下的颜色值
   • 利用Vue的响应式系统实现运行时主题切换

组件级优化策略

钢琴键盘组件：

• 采用对比度优化的键位配色方案
• 文字颜色随背景明度自动调整
• 增加键位间的视觉分隔

音序器组件：

• 重构网格线系统，建立清晰的视觉层次：
  • 小节线(最显著)
  • 拍子线(中等显著)
  • 细分网格线(最弱)
• 优化当前播放位置指示器
• 统一错误状态提示样式

音符元素：

• 实现状态可视化系统：
  • 默认状态
  • 选中状态
  • 冲突状态
  • 编辑状态
• 歌词显示区域独立样式控制

实现细节

1. SCSS变量系统： 建立专用的颜色变量映射表，与主题配置文件对应

2. 响应式更新机制： 通过Vuex状态管理实现主题变更时的样式热更新

3. 无障碍设计： 确保所有交互元素满足WCAG 2.1对比度要求

预期效果

优化后将实现：

• 完美的暗黑模式支持
• 统一的视觉语言
• 更专业的音乐制作体验
• 更好的可访问性

这项改进不仅解决了当前的技术债务，也为未来的UI扩展奠定了坚实的基础。