当前位置：首页 > JavaScript

js夜间实现

2026-03-13 21:21:06JavaScript

夜间模式的实现方法

在JavaScript中实现夜间模式通常涉及切换CSS样式或类名，以下是几种常见方法：

使用CSS变量切换主题

定义两套CSS变量分别对应日间和夜间模式，通过JavaScript切换body的类名或属性：

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

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

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

const toggleBtn = document.getElementById('theme-toggle');
toggleBtn.addEventListener('click', () => {
  document.body.dataset.theme = 
    document.body.dataset.theme === 'dark' ? 'light' : 'dark';
});

通过类名切换样式

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

.light-theme {
  background-color: #ffffff;
  color: #333333;
}

.dark-theme {
  background-color: #1a1a1a;
  color: #f0f0f0;
}

document.body.classList.toggle('dark-theme');

使用localStorage保存用户偏好

结合localStorage保存用户选择的主题，页面加载时自动应用：

// 切换并保存主题
function toggleTheme() {
  const isDark = document.body.classList.toggle('dark-theme');
  localStorage.setItem('darkMode', isDark);
}

// 页面加载时应用保存的主题
if (localStorage.getItem('darkMode') === 'true') {
  document.body.classList.add('dark-theme');
}

媒体查询与JavaScript结合

检测系统偏好设置并自动切换：

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
if (prefersDark.matches) {
  document.body.classList.add('dark-theme');
}

prefersDark.addListener((e) => {
  document.body.classList.toggle('dark-theme', e.matches);
});

渐变过渡效果

为切换过程添加平滑动画：

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

完整示例代码

以下是一个完整的实现示例：

js夜间实现

<button id="theme-toggle">切换夜间模式</button>

<script>
  const toggleBtn = document.getElementById('theme-toggle');

  function applyTheme(isDark) {
    document.body.style.backgroundColor = isDark ? '#1a1a1a' : '#ffffff';
    document.body.style.color = isDark ? '#f0f0f0' : '#333333';
  }

  toggleBtn.addEventListener('click', () => {
    const isDark = document.body.style.backgroundColor !== 'rgb(255, 255, 255)';
    applyTheme(!isDark);
    localStorage.setItem('darkMode', !isDark);
  });

  // 初始化
  applyTheme(localStorage.getItem('darkMode') === 'true');
</script>