纯JavaScript实现单按钮深浅模式切换及localStorage状态记忆

解决方案 #

优化后的HTML（单个按钮）

<button class="change">Dark mode is off</button>

修正后的JavaScript

// 获取按钮和body元素
const toggleBtn = document.querySelector('.change');
const body = document.body;

// 初始化模式：优先读取localStorage，默认浅色模式
const isDarkMode = localStorage.getItem('darkMode') === 'true';
if (isDarkMode) {
  body.style.backgroundColor = '#101010';
  body.style.color = '#FFFFFF';
  toggleBtn.textContent = 'Dark mode is on';
} else {
  body.style.backgroundColor = '#FFFFFF';
  body.style.color = '#101010';
  toggleBtn.textContent = 'Dark mode is off';
}

// 按钮点击事件
toggleBtn.addEventListener('click', () => {
  // 切换模式状态
  const currentDarkMode = localStorage.getItem('darkMode') === 'true';
  const newDarkMode = !currentDarkMode;
  
  // 更新样式和按钮文本
  if (newDarkMode) {
    body.style.backgroundColor = '#101010';
    body.style.color = '#FFFFFF';
    toggleBtn.textContent = 'Dark mode is on';
  } else {
    body.style.backgroundColor = '#FFFFFF';
    body.style.color = '#101010';
    toggleBtn.textContent = 'Dark mode is off';
  }
  
  // 保存状态到localStorage
  localStorage.setItem('darkMode', newDarkMode.toString());
});

关键改进点

• 用单个按钮替代原有两个按钮，通过状态切换文本内容
• 不再单独存储背景色和文字色，而是存储darkMode布尔状态，更简洁易维护
• 页面加载时优先读取localStorage的状态，初始化对应样式和按钮文本
• 点击按钮时同步更新样式、按钮文本和localStorage状态

内容的提问来源于stack exchange，提问作者user22029289