JavaScript 中怎么用 classList.toggle 实现暗黑模式的切换开关-js教程-PHP中文网

用classlist.toggle实现暗黑模式切换，核心是给html元素添加或移除dark类，并通过css变量定义亮/暗两套样式，再结合localstorage持久化用户偏好。

javascript 中怎么用 classlist.toggle 实现暗黑模式的切换开关

用 classList.toggle 实现暗黑模式切换，核心是给或添加/移除一个标识暗黑主题的类（比如 dark），再配合 CSS 变量或样式规则控制颜色。开关本身只需一个按钮，点击时触发切换即可。

1. HTML 结构：一个干净的切换按钮

不需要复杂标签，一个带 ID 的 <button></button> 就够了：

2. JavaScript：用 toggle 简洁切换类

监听按钮点击，对 document.documentElement（即元素）调用 classList.toggle('dark')：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

const toggleBtn = document.getElementById('theme-toggle');
toggleBtn.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
});

这行 toggle 会自动判断：
- 如果当前没有 dark 类，就添加它；
- 如果已有，就移除它。

3. CSS：定义亮色与暗色两套样式

推荐用 CSS 自定义变量统一管理颜色，在 :root 和 .dark 下分别设置：

:root {
  --bg-color: #fff;
  --text-color: #333;
}
.dark {
  --bg-color: #1e1e1e;
  --text-color: #e0e0e0;
}
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

4. 进阶建议：保存用户偏好

避免每次刷新都回到默认，可结合 localStorage 记住上次选择：

页面加载时读取 localStorage，有值就提前加 class
切换后立即存入新状态

// 加载时应用保存的主题
if (localStorage.getItem('theme') === 'dark') {
  document.documentElement.classList.add('dark');
}
// 切换时同步保存
toggleBtn.addEventListener('click', () => {
  document.documentElement.classList.toggle('dark');
  const isDark = document.documentElement.classList.contains('dark');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

不复杂但容易忽略：确保样式作用范围覆盖所有关键元素，优先用 :root + .dark 组合控制变量，比逐个写 .dark h1、.dark p 更简洁可维护。