使用原生JavaScript实现深色模式切换与用户偏好持久化-js教程-PHP中文网

使用原生JavaScript实现深色模式切换与用户偏好持久化

花韻仙語

发布： 2025-11-23 15:44:07

原创

631人浏览过

使用原生JavaScript实现深色模式切换与用户偏好持久化

本教程详细介绍了如何使用原生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>
    <button id="toggleBtn">深色模式已开启</button>

    <script src="script.js"></script>
</body>
</html>

登录后复制

在上述代码中，我们创建了一个ID为toggleBtn的按钮，其初始文本设置为“深色模式已开启”。

立即学习“Java免费学习笔记（深入）”；

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将通过添加或移除这个类来切换模式。

课游记AI

AI原生学习产品

查看详情

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]：获取页面中的<body>元素。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", ...)将当前模式的颜色保存到本地存储。
事件监听器：
- toggleBtn.addEventListener("click", function() { ... })：当用户点击按钮时，执行回调函数。
- body.classList.contains("dark-mode")：检查body元素当前是否具有dark-mode类，以此判断当前是否处于深色模式。
- applyMode(!isCurrentlyDarkMode)：根据当前模式调用applyMode函数，传入相反的模式状态，实现切换。
页面加载时的状态初始化：
- 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在现代浏览器中都有良好的支持。