本教程将指导您如何使用纯javascript、localstorage和css类实现一个用户友好的网页暗黑模式切换功能。通过一个简单的切换按钮，用户可以改变页面背景和字体颜色，并且其选择会被localstorage记住，确保在页面加载时自动恢复上次的模式，提升用户体验。
在现代网页设计中，提供暗黑模式（Dark Mode）选项已成为提升用户体验的重要功能之一。它不仅能减少夜间使用时的视觉疲劳，还能在特定环境下提高内容的可读性。本教程将详细介绍如何利用原生JavaScript、CSS以及Web存储API localStorage 来构建一个可持久化用户偏好的暗黑模式切换功能。
核心原理
实现暗黑模式切换主要涉及以下三个核心技术：
- HTML结构： 提供一个用户交互的切换按钮。
- CSS样式： 定义亮色模式和暗黑模式的视觉样式。通常通过一个特定的CSS类来封装暗黑模式的样式，并将其应用到body元素上。
- JavaScript逻辑：
HTML 结构
首先，我们需要在HTML中创建一个简单的按钮作为暗黑模式的切换器。这个按钮将负责触发JavaScript逻辑。
<!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"> <!-- 引入CSS文件 -->
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个关于暗黑模式切换的示例页面。</p>
<button id="toggleBtn">Dark mode is on</button>
<script src="script.js"></script> <!-- 引入JavaScript文件 -->
</body>
</html>我们为按钮添加了一个id="toggleBtn"，方便JavaScript获取该元素。按钮的初始文本可以设置为“Dark mode is on”，表示当前是亮色模式，点击后将切换到暗黑模式。
立即学习“Java免费学习笔记（深入）”；
CSS 样式
接下来，定义页面的基本样式以及暗黑模式特有的样式。我们将创建一个名为.dark-mode的CSS类，当这个类被添加到body元素时，页面就会呈现暗黑模式的视觉效果。
在style.css文件中添加以下内容：
body {
margin: 0;
height: 100vh; /* 确保body占据整个视口高度 */
font-family: Arial, sans-serif;
background-color: #FFFFFF; /* 亮色模式背景 */
color: #101010; /* 亮色模式字体颜色 */
/* 可选：添加过渡效果，使颜色切换更平滑 */
transition: background-color 0.3s ease, color 0.3s ease;
}
.dark-mode {
background-color: #101010; /* 暗黑模式背景 */
color: #FFFFFF; /* 暗黑模式字体颜色 */
}
#toggleBtn {
padding: 10px 20px;
margin: 20px;
cursor: pointer;
border: 1px solid #ccc;
background-color: #f0f0f0;
color: #333;
border-radius: 5px;
}
/* 暗黑模式下按钮的样式调整（可选） */
body.dark-mode #toggleBtn {
background-color: #333;
color: #f0f0f0;
border-color: #555;
}这里，body元素默认是亮色模式的样式。当body元素拥有.dark-mode类时，其背景色和字体颜色将被覆盖为暗黑模式的设定。我们还为body添加了transition属性，以确保颜色切换时有平滑的动画效果，提升用户体验。
JavaScript 逻辑
JavaScript是实现交互和持久化功能的核心。我们需要编写脚本来处理按钮点击事件、切换样式以及利用localStorage存储和恢复用户偏好。
在script.js文件中添加以下内容：
// 1. 获取DOM元素
var toggleBtn = document.getElementById("toggleBtn");
var body = document.getElementsByTagName("body")[0];
// 2. 定义亮色和暗色模式的颜色值
const LIGHT_MODE_BG = "#FFFFFF";
const LIGHT_MODE_TEXT = "#101010";
const DARK_MODE_BG = "#101010";
const DARK_MODE_TEXT = "#FFFFFF";
/**
* 3. 页面加载时，从localStorage恢复用户偏好
*/
function loadUserPreference() {
var savedBgColor = localStorage.getItem("bgColor");
var savedTextColor = localStorage.getItem("textColor");
if (savedBgColor && savedTextColor) {
// 应用保存的颜色
body.style.backgroundColor = savedBgColor;
body.style.color = savedTextColor;
// 根据保存的颜色判断是否为暗黑模式，并更新CSS类和按钮文本
if (savedBgColor === DARK_MODE_BG && savedTextColor === DARK_MODE_TEXT) {
body.classList.add("dark-mode");
toggleBtn.textContent = "Dark mode is off"; // 暗黑模式下按钮显示“Dark mode is off”
} else {
body.classList.remove("dark-mode");
toggleBtn.textContent = "Dark mode is on"; // 亮色模式下按钮显示“Dark mode is on”
}
} else {
// 如果没有保存的偏好，默认设置为亮色模式
body.classList.remove("dark-mode");
body.style.backgroundColor = LIGHT_MODE_BG;
body.style.color = LIGHT_MODE_TEXT;
toggleBtn.textContent = "Dark mode is on";
}
}
// 首次加载页面时调用
loadUserPreference();
/**
* 4. 监听按钮点击事件，切换模式
*/
toggleBtn.addEventListener("click", function() {
let currentBgColor, currentTextColor;
// 检查当前是否为暗黑模式
if (body.classList.contains("dark-mode")) {
// 当前是暗黑模式，切换到亮色模式
body.classList.remove("dark-mode");
toggleBtn.textContent = "Dark mode is on";
currentBgColor = LIGHT_MODE_BG;
currentTextColor = LIGHT_MODE_TEXT;
} else {
// 当前是亮色模式，切换到暗黑模式
body.classList.add("dark-mode");
toggleBtn.textContent = "Dark mode is off";
currentBgColor = DARK_MODE_BG;
currentTextColor = DARK_MODE_TEXT;
}
// 直接设置body的style属性，确保localStorage能准确保存当前颜色
body.style.backgroundColor = currentBgColor;
body.style.color = currentTextColor;
// 将选择的颜色保存到localStorage
localStorage.setItem("bgColor", currentBgColor);
localStorage.setItem("textColor", currentTextColor);
});代码解析：
- 获取元素： 通过document.getElementById和document.getElementsByTagName获取按钮和body元素。
- 定义颜色常量： 使用常量来存储亮色和暗色模式的背景和文本颜色，提高代码可读性和维护性。
-
loadUserPreference() 函数：
- 在页面加载时执行，尝试从localStorage中获取之前保存的bgColor和textColor。
- 如果找到保存的颜色，则直接将这些颜色应用到body.style上。
- 根据恢复的颜色判断当前模式（是否为暗黑模式），然后相应地添加或移除dark-mode类，并更新按钮的文本。
- 如果localStorage中没有保存的偏好，则默认应用亮色模式。
-
事件监听器：
- 为toggleBtn添加click事件监听器。
- 在点击事件中，首先检查body元素是否包含dark-mode类。
- 如果包含，说明当前是暗黑模式，则移除dark-mode类，并将页面切换到亮色模式的颜色，同时更新按钮文本为“Dark mode is on”。
- 如果不包含，说明当前是亮色模式，则添加dark-mode类，并将页面切换到暗黑模式的颜色，同时更新按钮文本为“Dark mode is off”。
- 关键一步： 在切换模式后，将当前的背景色和文本颜色通过localStorage.setItem()保存起来。这样，即使刷新页面或关闭浏览器，用户的偏好也会被记住。
完整代码示例
为了方便您测试，这里提供了完整的HTML、CSS和JavaScript代码。您可以将它们分别保存为index.html、style.css和script.js，并在浏览器中打开index.html。
index.html
<!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>
<button id="toggleBtn">Dark mode is on</button>
<script src="script.js"></script>
</body>
</html>style.css
body {
margin: 0;
height: 100vh;
font-family: Arial, sans-serif;
background-color: #FFFFFF;
color: #101010;
transition: background-color 0.3s ease, color 0.3s ease;
}
.dark-mode {
background-color: #101010;
color: #FFFFFF;
}
#toggleBtn {
padding: 10px 20px;
margin: 20px;
cursor: pointer;
border: 1px solid #ccc;
background-color: #f0f0f0;
color: #333;
border-radius: 5px;
font-size: 16px;
}
body.dark-mode #toggleBtn {
background-color: #333;
color: #f0f0f0;
border-color: #555;
}
h1, p {
margin-left: 20px;
}script.js
// 1. 获取DOM元素
var toggleBtn = document.getElementById("toggleBtn");
var body = document.getElementsByTagName("body")[0];
// 2. 定义亮色和暗色模式的颜色值
const LIGHT_MODE_BG = "#FFFFFF";
const LIGHT_MODE_TEXT = "#101010";
const DARK_MODE_BG = "#101010";
const DARK_MODE_TEXT = "#FFFFFF";
/**
* 3. 页面加载时，从localStorage恢复用户偏好
*/
function loadUserPreference() {
var savedBgColor = localStorage.getItem("bgColor");
var savedTextColor = localStorage.getItem("textColor");
if (savedBgColor && savedTextColor) {
// 应用保存的颜色
body.style.backgroundColor = savedBgColor;
body.style.color = savedTextColor;
// 根据保存的颜色判断是否为暗黑模式，并更新CSS类和按钮文本
if (savedBgColor === DARK_MODE_BG && savedTextColor === DARK_MODE_TEXT) {
body.classList.add("dark-mode");
toggleBtn.textContent = "Dark mode is off"; // 暗黑模式下按钮显示“Dark mode is off”
} else {
body.classList.remove("dark-mode");
toggleBtn.textContent = "Dark mode is on"; // 亮色模式下按钮显示“Dark mode is on”
}
} else {
// 如果没有保存的偏好，默认设置为亮色模式
body.classList.remove("dark-mode");
body.style.backgroundColor = LIGHT_MODE_BG;
body.style.color = LIGHT_MODE_TEXT;
toggleBtn.textContent = "Dark mode is on";
}
}
// 首次加载页面时调用
loadUserPreference();
/**
* 4. 监听按钮点击事件，切换模式
*/
toggleBtn.addEventListener("click", function() {
let currentBgColor, currentTextColor;
// 检查当前是否为暗黑模式
if (body.classList.contains("dark-mode")) {
// 当前是暗黑模式，切换到亮色模式
body.classList.remove("dark-mode");
toggleBtn.textContent = "Dark mode is on";
currentBgColor = LIGHT_MODE_BG;
currentTextColor = LIGHT_MODE_TEXT;
} else {
// 当前是亮色模式，切换到暗黑模式
body.classList.add("dark-mode");
toggleBtn.textContent = "Dark mode is off";
currentBgColor = DARK_MODE_BG;
currentTextColor = DARK_MODE_TEXT;
}
// 直接设置body的style属性，确保localStorage能准确保存当前颜色
body.style.backgroundColor = currentBgColor;
body.style.color = currentTextColor;
// 将选择的颜色保存到localStorage
localStorage.setItem("bgColor", currentBgColor);
localStorage.setItem("textColor", currentTextColor);
});注意事项与优化
- CSS类与内联样式优先级： 在本教程中，我们同时使用了CSS类（.dark-mode）和直接修改body.style。body.style会创建内联样式，其优先级高于外部CSS文件中的规则。这里直接设置body.style是为了确保localStorage能够准确地存储和恢复当前应用的具体颜色值。在更复杂的场景中，您可能更倾向于只在localStorage中存储一个布尔值（例如isDarkMode），然后完全通过CSS类来控制样式，避免内联样式与CSS类的潜在冲突。
- 平滑过渡： 在style.css中为body元素添加transition属性（例如transition: background-color 0.3s ease, color 0.3s ease;），可以使背景色和字体颜色的切换更加平滑，提升用户视觉体验。
- 初始按钮文本： loadUserPreference()函数确保了在页面加载时，按钮的文本能够正确反映当前模式，即使是从localStorage恢复的模式。
- 可访问性： 为了提高可访问性，可以考虑为切换按钮添加aria-label属性，例如aria-label="Toggle dark mode"，或使用aria-pressed属性来指示按钮的当前状态。
- 代码组织： 对于大型项目，可以将颜色常量、DOM元素获取和事件监听器等逻辑封装到更独立的模块或函数中，以提高代码的可维护性。
总结
通过本教程，您已经学会了如何使用纯JavaScript、CSS和localStorage实现一个功能完整的网页暗黑模式切换功能。这个方案不仅提供了用户友好的交互，还通过localStorage实现了用户偏好的持久化，极大地提升了用户体验。在此基础上，您可以根据自己的项目需求进行进一步的扩展和优化，例如支持更多主题、为特定元素应用暗黑模式样式，或与其他前端框架集成。
