深色模式实现

CSS自定义属性方法

/* Step 1: Define light mode defaults */
:root {
  --bg: #ffffff;
  --surface: #f4f4f8;
  --text: #1a1a2e;
  --text-muted: #6b7280;
  --border: #e5e7eb;
}

/* Step 2: Override for system dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1117;
    --surface: #1c2035;
    --text: #e2e8f0;
    --text-muted: #8b92a5;
    --border: #2a2f4a;
  }
}

/* Step 3: Class-based toggle override */
[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #1c2035;
}
[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f4f4f8;
}

JavaScript切换并记住用户偏好

// Prevent flash of wrong theme (add to <head>)
(function() {
  const saved = localStorage.getItem('theme');
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  document.documentElement.dataset.theme = saved || (prefersDark ? 'dark' : 'light');
})();

// Toggle button logic
function toggleTheme() {
  const current = document.documentElement.dataset.theme;
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.dataset.theme = next;
  localStorage.setItem('theme', next);
}

深色模式最佳实践

规则	原因
用#1c2035而非纯#000000作背景	纯黑对比度过高，眼疲劳
深色模式下降低颜色饱和度	鲜艳色在深色背景不舒适
有选择地反转图片（图标、图表）	照片完全反转效果差
添加transition:color 0.2s ease平滑切换	避免突兀的瞬间切换
测试光敏感用户体验	可访问性是主要使用场景

深色模式实现

CSS自定义属性方法

JavaScript切换并记住用户偏好

深色模式最佳实践

相关工具推荐