本教程详细介绍了如何使用原生javascript实现网页的深色/浅色模式切换功能，并利用`localstorage`持久化用户的选择。通过一个简洁的切换按钮，用户可以轻松改变页面背景和字体颜色，且其偏好在页面刷新后依然有效。文章将涵盖html结构、css样式定义以及核心javascript逻辑，包括dom操作、事件监听和本地存储的应用。
在现代网页设计中，为用户提供深色模式（Dark Mode）选项已成为一项常见且受欢迎的功能。它不仅能改善用户在低光环境下的阅读体验，还能有效减少眼睛疲劳。本文将指导您如何使用纯JavaScript（Vanilla JavaScript）结合localStorage实现一个功能完善的深色模式切换器，包括状态保存和页面加载时的自动恢复。
核心概念
在深入代码之前，我们先了解实现此功能所需的几个核心Web技术：
- DOM操作 (Document Object Model)：JavaScript通过DOM API与HTML元素进行交互，例如获取元素、修改其内容或样式。
- 事件监听 (Event Listener)：允许我们响应用户在网页上的操作，如点击按钮。
- classList API：一个方便的属性，用于管理元素的CSS类，可以轻松添加、移除或切换类。
- localStorage API：浏览器提供的一种Web存储机制，允许网站将键值对数据存储在浏览器中，即使浏览器关闭后数据也不会丢失。
HTML结构
首先，我们需要一个简单的HTML按钮作为深色模式的切换开关。为了方便JavaScript访问，我们为其分配一个唯一的ID。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>深色模式切换示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个演示深色模式切换功能的页面。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a></a>”；</p>
<button id="toggleBtn">深色模式已开启</button>
<script src="script.js"></script>
</body>
</html>在上述代码中，我们创建了一个ID为toggleBtn的按钮，其初始文本设置为“深色模式已开启”。
CSS样式
为了实现深色模式的视觉效果，我们将定义一个CSS类.dark-mode，其中包含深色模式下的背景色和字体颜色。
body {
margin: 0;
height: 100vh; /* 确保body占据整个视口高度 */
font-family: sans-serif; /* 示例字体 */
background-color: #FFFFFF; /* 默认浅色模式背景 */
color: #101010; /* 默认浅色模式字体颜色 */
transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡效果 */
}
.dark-mode {
background-color: #101010;
color: #FFFFFF;
}这里，body元素设置了默认的浅色模式样式，并添加了transition属性以实现颜色变化的平滑过渡。.dark-mode类则定义了深色模式下的背景和字体颜色。JavaScript将通过添加或移除这个类来切换模式。
JavaScript逻辑
现在，我们将编写核心的JavaScript代码来处理模式切换、按钮文本更新以及用户偏好存储。
// 获取DOM元素
var toggleBtn = document.getElementById("toggleBtn");
var body = document.getElementsByTagName("body")[0]; // 注意：getElementsByTagName返回一个HTMLCollection，需要通过索引[0]访问第一个元素
// 定义深色和浅色模式的颜色值，方便管理
const DARK_MODE_BG = "#101010";
const DARK_MODE_TEXT = "#FFFFFF";
const LIGHT_MODE_BG = "#FFFFFF";
const LIGHT_MODE_TEXT = "#101010";
/**
* 应用指定的模式样式和更新按钮文本
* @param {boolean} isDarkMode - 是否为深色模式
*/
function applyMode(isDarkMode) {
if (isDarkMode) {
body.classList.add("dark-mode");
body.style.backgroundColor = DARK_MODE_BG;
body.style.color = DARK_MODE_TEXT;
toggleBtn.textContent = "深色模式已关闭";
localStorage.setItem("bgColor", DARK_MODE_BG);
localStorage.setItem("textColor", DARK_MODE_TEXT);
} else {
body.classList.remove("dark-mode");
body.style.backgroundColor = LIGHT_MODE_BG;
body.style.color = LIGHT_MODE_TEXT;
toggleBtn.textContent = "深色模式已开启";
localStorage.setItem("bgColor", LIGHT_MODE_BG);
localStorage.setItem("textColor", LIGHT_MODE_TEXT);
}
}
// 监听按钮点击事件
toggleBtn.addEventListener("click", function() {
// 检查当前body是否包含'dark-mode'类来判断当前模式
var isCurrentlyDarkMode = body.classList.contains("dark-mode");
applyMode(!isCurrentlyDarkMode); // 切换模式
});
// 页面加载时：从localStorage中检索并应用保存的模式
var savedBgColor = localStorage.getItem("bgColor");
var savedTextColor = localStorage.getItem("textColor");
if (savedBgColor && savedTextColor) {
// 如果localStorage中有保存的颜色，则应用它们
body.style.backgroundColor = savedBgColor;
body.style.color = savedTextColor;
// 根据保存的颜色判断是否为深色模式，并更新classList和按钮文本
if (savedBgColor === DARK_MODE_BG && savedTextColor === DARK_MODE_TEXT) {
body.classList.add("dark-mode");
toggleBtn.textContent = "深色模式已关闭";
} else {
body.classList.remove("dark-mode");
toggleBtn.textContent = "深色模式已开启";
}
} else {
// 如果localStorage中没有保存的颜色，则默认应用浅色模式（或根据需求设置默认深色）
applyMode(false); // 默认浅色模式
}代码详解
-
获取DOM元素：
- document.getElementById("toggleBtn")：通过ID获取切换按钮。
- document.getElementsByTagName("body")[0]：获取页面中的元素。getElementsByTagName返回一个HTMLCollection，即使只有一个body元素，也需要通过索引[0]来访问它。
-
applyMode 函数：
- 这个辅助函数封装了应用样式和更新localStorage的逻辑，避免代码重复。
- 它根据传入的isDarkMode布尔值来决定添加或移除dark-mode类。
- 同时，直接设置body.style.backgroundColor和body.style.color。虽然CSS类已定义了这些样式，但直接设置style属性可以确保localStorage中保存的值能够被准确检索并应用，特别是在某些复杂场景下，内联样式优先级更高。
- 更新按钮的textContent以反映当前模式。
- 使用localStorage.setItem("bgColor", ...)和localStorage.setItem("textColor", ...)将当前模式的颜色保存到本地存储。
-
事件监听器：
-
页面加载时的状态初始化：
- localStorage.getItem("bgColor")和localStorage.getItem("textColor")：在页面加载时，尝试从localStorage中获取之前保存的背景色和字体颜色。
- if (savedBgColor && savedTextColor)：如果localStorage中存在保存的颜色值，则直接将它们应用到body的style属性上。
- 根据保存的颜色值判断是深色还是浅色模式，然后相应地添加或移除dark-mode类，并更新按钮的textContent。这确保了页面刷新后，不仅颜色恢复，按钮的文本和body的类状态也与用户上次离开时一致。
- else { applyMode(false); }：如果localStorage中没有找到保存的颜色（例如，用户首次访问），则默认应用浅色模式。
总结与注意事项
- CSS类优先：尽管示例中直接设置了body.style，但在更复杂的应用中，通常建议尽可能通过添加/移除CSS类来管理样式，以保持样式和行为的分离。直接设置style属性在这里主要是为了确保localStorage能准确保存和恢复颜色值。
- 用户体验：添加CSS transition属性可以使模式切换过程更加平滑，提升用户体验。
- localStorage的局限性：localStorage是同步的，存储的数据量有限（通常为5-10MB），且只能存储字符串。对于更复杂或大量的数据，可以考虑使用indexedDB或其他后端存储方案。
- 可访问性：在设计深色模式时，请确保颜色对比度符合WCAG（Web内容可访问性指南）标准，以确保所有用户都能良好阅读。
- 跨浏览器兼容性：localStorage和classList在现代浏览器中都有良好的支持。
通过上述步骤，您已经成功实现了一个功能完善的深色模式切换功能，它能够记住用户的偏好，并在用户下次访问时自动恢复。这个基础模式可以进一步扩展，例如加入系统主题检测、更丰富的动画效果或多主题选项。
