JavaScript与localStorage实现网页暗黑模式切换教程-js教程-PHP中文网

JavaScript与localStorage实现网页暗黑模式切换教程

本教程将指导您如何使用纯javascript、localstorage和css类实现一个用户友好的网页暗黑模式切换功能。通过一个简单的切换按钮，用户可以改变页面背景和字体颜色，并且其选择会被localstorage记住，确保在页面加载时自动恢复上次的模式，提升用户体验。

在现代网页设计中，提供暗黑模式（Dark Mode）选项已成为提升用户体验的重要功能之一。它不仅能减少夜间使用时的视觉疲劳，还能在特定环境下提高内容的可读性。本教程将详细介绍如何利用原生JavaScript、CSS以及Web存储API localStorage 来构建一个可持久化用户偏好的暗黑模式切换功能。

核心原理

实现暗黑模式切换主要涉及以下三个核心技术：

HTML结构： 提供一个用户交互的切换按钮。
CSS样式： 定义亮色模式和暗黑模式的视觉样式。通常通过一个特定的CSS类来封装暗黑模式的样式，并将其应用到body元素上。
JavaScript逻辑：
- 监听按钮的点击事件。
- 根据当前模式动态添加或移除body元素的CSS类。
- 更新按钮的文本以反映当前模式。
- 使用localStorage在用户的浏览器中持久化存储用户选择的模式，以便在页面重新加载时恢复。

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实现了用户偏好的持久化，极大地提升了用户体验。在此基础上，您可以根据自己的项目需求进行进一步的扩展和优化，例如支持更多主题、为特定元素应用暗黑模式样式，或与其他前端框架集成。

以上就是JavaScript与localStorage实现网页暗黑模式切换教程的详细内容，更多请关注php中文网其它相关文章！