深色模式（Dark Mode）支持在视觉层面和可访问性层面都需谨慎设计。本文列出实现策略与注意事项。
实现方式
- 使用 CSS 变量或媒体查询（prefers-color-scheme）实现主题切换。
视觉与可访问性
- 确保文本与背景对比度在深色模式下仍然满足可读性标准，避免纯黑背景与高饱和色组合。
工程实践
- 提供主题切换开关并保存用户偏好；支持自动跟随系统首选项与手动覆盖。
结论
深色模式应作为设计系统的一等公民，保证在不同主题下的可访问性与视觉一致性。
初步纲要
暗色模式支持不仅是配色切换，更涉及图像、阴影与对比度的整体适配。本文给出在模板与编辑器中实现暗色模式的工程方案与可访问性建议。
实现要点
- 使用 CSS 变量抽象语义颜色（
--bg-primary、--text-primary），并为浅色/暗色主题提供各自值。 - 利用
prefers-color-scheme提供默认主题，并允许用户在编辑器中覆盖主题选择。
图像与 Asset 适配
- 对图片和图标提供暗色版本或使用 CSS filter/overlay 以确保在暗色背景下依然清晰。
对比度与可访问性
- 暗色主题中需保证文本与背景的对比度满足 WCAG 要求；监控不同主题下的对比度并在生成时验证。
相关链接：