深色模式来了

深色模式来了

• 1 分钟阅读

深色模式已上线，覆盖整个 Brandmine 平台。

自动主题切换

我们尊重您的系统偏好：

  • macOS/iOS：设置 → 显示与亮度 → 深色
  • Windows：设置 → 个性化 → 颜色 → 深色
  • Android：设置 → 显示 → 深色主题

网站自动适应。无需手动切换。

我们优化的内容

语义颜色系统

  • ✅ 所有颜色使用 CSS 变量（--bg-primary、--text-primary）
  • ✅ 基于 prefers-color-scheme 自动切换
  • ✅ 品牌青色从 #38B2AC（浅色）调整为 #4FD1C5（深色）

对比度验证

  • ✅ 所有文本在两种模式下都符合 WCAG AA 标准
  • ✅ 浅色模式青色：仅用于背景（作为文本不通过）
  • ✅ 深色模式青色：通过所有测试（10.04:1 对比度）

组件覆盖

  • ✅ 所有 50+ 组件支持深色模式
  • ✅ 表单、模态框、卡片、导航——一切
  • ✅ 边缘情况：加载状态、验证、空状态

为什么自动？

用户研究：大多数人希望深色模式匹配其系统偏好。添加手动切换会产生摩擦（应该在哪里存储偏好？cookies？localStorage？默认是什么？）。

简单性：用户少做一个决定。系统知道你想要什么。

电池寿命：在 OLED 屏幕上，深色模式可以延长 30-40% 的电池寿命。

技术细节

基础：ADR-0034 记录了我们完整的深色模式策略。

文件：

  • assets/css/base/variables.css（颜色定义）
  • assets/css/components/dark-mode.css（1310 行组件样式）
  • docs/technical/dark-mode-colors.md（完整颜色参考）

性能：无需 JavaScript。纯 CSS 媒体查询。

接下来是什么（可选）

我们可能在未来添加手动切换，供想要覆盖系统偏好的用户使用。目前，我们保持简单。

试试看：将您的设备切换到深色模式，以全新的视角（或缺乏视角）体验 Brandmine。

更新（12月11日）

我了解到这比预期的要复杂一些，所以今天不得不花几个小时排查和微调我们的深色模式设置——但现在它运行得像小猫一样流畅。