如何用原生JavaScript实现按钮手动切换明暗主题（非复选框）

第一步：重构CSS，使用CSS变量（核心优化） #

把原来分散在媒体查询里的颜色值统一放到CSS变量中，切换主题时只需修改变量值，不用逐个调整选择器样式：

/* 定义默认（浅色）主题变量 */
:root {
  --text-color: #333333;
  /* 可根据页面需求添加更多变量，比如背景色、边框色等 */
  /* --bg-color: #ffffff; */
}

/* 跟随系统深色主题时的变量 */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --text-color: #e7e7e7;
    /* --bg-color: #1a1a1a; */
  }
}

/* 手动切换深色主题时，强制覆盖变量 */
:root.dark {
  --text-color: #e7e7e7;
  /* --bg-color: #1a1a1a; */
}

/* 将变量应用到元素 */
p, h2 {
  color: var(--text-color);
}
/* 其他需要主题色的元素，同样用var(--变量名)引用 */

第二步：编写原生JS逻辑（按钮切换+记忆用户选择） #

给按钮绑定点击事件，切换根元素的dark类，同时用localStorage保存用户选择，页面刷新后自动应用：

// 获取主题切换按钮
const themeBtn = document.querySelector('.theme-switch');
// 获取根元素
const root = document.documentElement;

// 初始化主题：优先读取用户保存的设置，无设置则跟随系统
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
  root.classList.add('dark');
  // 切换图标与提示文字
  document.querySelector('.fa-solid').classList.replace('fa-moon', 'fa-sun');
  document.querySelector('.fa-solid').setAttribute('title', '切换到浅色模式');
}

// 按钮点击切换逻辑
themeBtn.addEventListener('click', () => {
  const isDark = root.classList.contains('dark');
  
  if (isDark) {
    // 切换到浅色主题
    root.classList.remove('dark');
    localStorage.setItem('theme', 'light');
    // 更新图标与提示
    document.querySelector('.fa-solid').classList.replace('fa-sun', 'fa-moon');
    document.querySelector('.fa-solid').setAttribute('title', '切换到深色模式');
  } else {
    // 切换到深色主题
    root.classList.add('dark');
    localStorage.setItem('theme', 'dark');
    // 更新图标与提示
    document.querySelector('.fa-solid').classList.replace('fa-moon', 'fa-sun');
    document.querySelector('.fa-solid').setAttribute('title', '切换到浅色模式');
  }
});

第三步：HTML调整（可选优化） #

你的现有HTML结构可直接使用，若需要切换按钮文本，可在JS逻辑中添加对应修改：

<div class="dark-mode-container">
  <div id="dark-mode-btn">
    <button class="theme-switch">切换主题</button>
    <i class="fa-solid fa-moon" title="切换到深色模式"></i>
  </div>
</div>

关键说明 #

• CSS变量让主题切换更灵活，可根据页面设计扩展更多主题变量，所有主题相关样式都通过变量引用。
• localStorage用于持久化用户的主题选择，避免页面刷新后重置为系统默认。
• 初始化逻辑同时兼顾用户手动设置与系统主题偏好，保证体验连贯性。

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