js夜间实现

夜间模式实现方法

在JavaScript中实现夜间模式（暗黑模式）通常涉及修改页面的CSS样式，切换颜色方案。以下是几种常见实现方式：

通过CSS类切换

定义两套CSS样式，通过切换类名实现夜间模式：

/* 默认样式 */
body {
  background-color: white;
  color: black;
}

/* 夜间模式样式 */
body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

JavaScript切换逻辑：

function toggleDarkMode() {
  document.body.classList.toggle('dark-mode');
  // 保存用户偏好到localStorage
  const isDark = document.body.classList.contains('dark-mode');
  localStorage.setItem('darkMode', isDark);
}

// 初始化时检查用户偏好
if (localStorage.getItem('darkMode') === 'true') {
  document.body.classList.add('dark-mode');
}

使用CSS变量

更灵活的解决方案是使用CSS变量：

:root {
  --bg-color: white;
  --text-color: black;
}

:root.dark-theme {
  --bg-color: #121212;
  --text-color: #e0e0e0;
}

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

JavaScript切换：

function toggleTheme() {
  const root = document.documentElement;
  root.classList.toggle('dark-theme');
  localStorage.setItem('theme', root.classList.contains('dark-theme') ? 'dark' : 'light');
}

// 初始化
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
  document.documentElement.classList.add('dark-theme');
}

跟随系统偏好

现代浏览器支持检测用户系统颜色偏好：

// 检测系统偏好并监听变化
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

function setTheme(isDark) {
  if (isDark) {
    document.documentElement.classList.add('dark-theme');
  } else {
    document.documentElement.classList.remove('dark-theme');
  }
}

// 初始设置
setTheme(prefersDark.matches);

// 监听系统主题变化
prefersDark.addListener((e) => setTheme(e.matches));

完整实现示例

结合上述方法的完整实现：

class DarkMode {
  constructor() {
    this.themeToggle = document.getElementById('theme-toggle');
    this.init();
  }

  init() {
    // 优先使用localStorage，其次使用系统偏好
    const savedTheme = localStorage.getItem('theme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    const isDark = savedTheme ? savedTheme === 'dark' : prefersDark;
    this.setTheme(isDark);

    if (this.themeToggle) {
      this.themeToggle.checked = isDark;
      this.themeToggle.addEventListener('change', () => this.toggleTheme());
    }

    // 监听系统主题变化
    window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
      if (!localStorage.getItem('theme')) {
        this.setTheme(e.matches);
      }
    });
  }

  setTheme(isDark) {
    const root = document.documentElement;
    if (isDark) {
      root.classList.add('dark-theme');
    } else {
      root.classList.remove('dark-theme');
    }
  }

  toggleTheme() {
    const isDark = this.themeToggle.checked;
    this.setTheme(isDark);
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
  }
}

// 初始化
new DarkMode();

注意事项

1. 过渡动画：添加CSS过渡效果使切换更平滑

   

   * {
     transition: background-color 0.3s ease, color 0.3s ease;
   }

2. 图标切换：可以使用SVG或字体图标根据主题切换不同图标

3. 性能考虑：避免过渡动画影响过多元素，可能导致性能问题

4. 可访问性：确保夜间模式下的颜色对比度仍符合WCAG标准

5. 持久化：使用localStorage或cookie保存用户偏好

以上方法可根据具体需求组合使用，创建灵活且用户友好的夜间模式功能。