登录
首页 >  文章 >  前端

深色模式切换与用户偏好保存方法

时间：2025-12-18 16:36:35 422浏览 收藏

推广推荐
免费电影APP ➜
支持 PC / 移动端，安全直达

本篇文章给大家分享《深色模式切换与用户偏好保存实现》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

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

本教程详细介绍了如何使用原生JavaScript实现网页的深色/浅色模式切换功能，并利用`localStorage`持久化用户的选择。通过一个简洁的切换按钮，用户可以轻松改变页面背景和字体颜色，且其偏好在页面刷新后依然有效。文章将涵盖HTML结构、CSS样式定义以及核心JavaScript逻辑，包括DOM操作、事件监听和本地存储的应用。

在现代网页设计中，为用户提供深色模式（Dark Mode）选项已成为一项常见且受欢迎的功能。它不仅能改善用户在低光环境下的阅读体验，还能有效减少眼睛疲劳。本文将指导您如何使用纯JavaScript（Vanilla JavaScript）结合localStorage实现一个功能完善的深色模式切换器，包括状态保存和页面加载时的自动恢复。

核心概念

在深入代码之前，我们先了解实现此功能所需的几个核心Web技术：

  1. DOM操作 (Document Object Model)：JavaScript通过DOM API与HTML元素进行交互，例如获取元素、修改其内容或样式。
  2. 事件监听 (Event Listener)：允许我们响应用户在网页上的操作，如点击按钮。
  3. classList API：一个方便的属性，用于管理元素的CSS类，可以轻松添加、移除或切换类。
  4. 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的按钮，其初始文本设置为“深色模式已开启”。

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); // 默认浅色模式
}

代码详解

  1. 获取DOM元素：

    • document.getElementById("toggleBtn")：通过ID获取切换按钮。
    • document.getElementsByTagName("body")[0]：获取页面中的元素。getElementsByTagName返回一个HTMLCollection，即使只有一个body元素，也需要通过索引[0]来访问它。

  2. applyMode 函数：

    • 这个辅助函数封装了应用样式和更新localStorage的逻辑，避免代码重复。
    • 它根据传入的isDarkMode布尔值来决定添加或移除dark-mode类。
    • 同时，直接设置body.style.backgroundColor和body.style.color。虽然CSS类已定义了这些样式，但直接设置style属性可以确保localStorage中保存的值能够被准确检索并应用，特别是在某些复杂场景下，内联样式优先级更高。
    • 更新按钮的textContent以反映当前模式。
    • 使用localStorage.setItem("bgColor", ...)和localStorage.setItem("textColor", ...)将当前模式的颜色保存到本地存储。

  3. 事件监听器：

    • toggleBtn.addEventListener("click", function() { ... })：当用户点击按钮时，执行回调函数。
    • body.classList.contains("dark-mode")：检查body元素当前是否具有dark-mode类，以此判断当前是否处于深色模式。
    • applyMode(!isCurrentlyDarkMode)：根据当前模式调用applyMode函数，传入相反的模式状态，实现切换。

  4. 页面加载时的状态初始化：

    • 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在现代浏览器中都有良好的支持。

通过上述步骤，您已经成功实现了一个功能完善的深色模式切换功能，它能够记住用户的偏好，并在用户下次访问时自动恢复。这个基础模式可以进一步扩展，例如加入系统主题检测、更丰富的动画效果或多主题选项。

好了，本文到此结束，带大家了解了《深色模式切换与用户偏好保存方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>