暗黑模式最佳实践

暗黑模式早已不是加分项，而是标配。实现方式也在不断进化。

CSS 变量方案

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --primary: #3b82f6;
}

[data-theme="dark"] {
  --bg: #1a1a1a;
  --text: #f0f0f0;
  --primary: #60a5fa;
}

body {
  background: var(--bg);
  color: var(--text);
  transition: background 0.3s, color 0.3s;
}

跟随系统

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1a1a;
    --text: #f0f0f0;
  }
}

color-scheme 属性

:root {
  color-scheme: light dark;
}

这一行让浏览器原生控件（滚动条、表单）自动匹配主题，不用再单独写样式。

暗黑模式的核心是用变量集中管理颜色，避免散落各处的硬编码色值。