暗色模式的兴起

暗色模式不仅是时尚潮流，更是对用户视力保护和电池寿命的关怀。本文从心理学角度分析暗色模式的益处，并提供实用的CSS和JavaScript实现方案。

心理学基础

暗色模式可以减少眼睛疲劳，特别是在低光环境下。研究表明，适当的对比度可以提高阅读舒适度，减少视觉压力。

CSS实现方案

使用CSS自定义属性和媒体查询可以轻松实现暗色模式。

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --primary-color: #007bff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
    --primary-color: #3399ff;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

JavaScript切换功能

除了系统偏好，我们还应该允许用户手动切换主题。

const themeToggle = document.getElementById('themeToggle');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
  document.documentElement.setAttribute('data-theme', currentTheme);
}

themeToggle.addEventListener('click', () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  
  document.documentElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
});

设计注意事项

避免纯黑色背景，使用深灰色
调整颜色饱和度和对比度
为阴影和层次感使用不同的灰度
测试不同环境下的可读性

文章索引

文章索引

文章尚未发布

选择文章开始阅读

文章标题

附件

评论

用户登录

⚠️ 外部链接警告