运城市盐湖区信雨科技有限公司
首页 > 营销学院 > 技术知识

J*aScript与localStorage实现网页暗黑模式切换教程

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

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

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

核心原理

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

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

HTML 结构

首先，我们需要在HTML中创建一个简单的按钮作为暗黑模式的切换器。这个按钮将负责触发J*aScript逻辑。

<!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><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">J*a免费学习笔记（深入）</a>”；</p>
    <button id="toggleBtn">Dark mode is on</button>

    <script src="script.js"></script> <!-- 引入J*aScript文件 -->
</body>
</html>

我们为按钮添加了一个id="toggleBtn"，方便J*aScript获取该元素。按钮的初始文本可以设置为“Dark mode is on”，表示当前是亮色模式，点击后将切换到暗黑模式。

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属性，以确保颜色切换时有平滑的动画效果，提升用户体验。

J*aScript 逻辑

J*aScript是实现交互和持久化功能的核心。我们需要编写脚本来处理按钮点击事件、切换样式以及利用localStorage存储和恢复用户偏好。

AppStruct AppStruct

无代码应用开发平台

AppStruct 132 查看详情 AppStruct

在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 s*edBgColor = localStorage.getItem("bgColor");
    var s*edTextColor = localStorage.getItem("textColor");

    if (s*edBgColor && s*edTextColor) {
        // 应用保存的颜色
        body.style.backgroundColor = s*edBgColor;
        body.style.color = s*edTextColor;

        // 根据保存的颜色判断是否为暗黑模式，并更新CSS类和按钮文本
        if (s*edBgColor === DARK_MODE_BG && s*edTextColor === 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);
});

代码解析：

  1. 获取元素： 通过document.getElementById和document.getElementsByTagName获取按钮和body元素。
  2. 定义颜色常量： 使用常量来存储亮色和暗色模式的背景和文本颜色，提高代码可读性和维护性。
  3. loadUserPreference() 函数：
    • 在页面加载时执行，尝试从localStorage中获取之前保存的bgColor和textColor。
    • 如果找到保存的颜色，则直接将这些颜色应用到body.style上。
    • 根据恢复的颜色判断当前模式（是否为暗黑模式），然后相应地添加或移除dark-mode类，并更新按钮的文本。
    • 如果localStorage中没有保存的偏好，则默认应用亮色模式。
  4. 事件监听器：
    • 为toggleBtn添加click事件监听器。
    • 在点击事件中，首先检查body元素是否包含dark-mode类。
    • 如果包含，说明当前是暗黑模式，则移除dark-mode类，并将页面切换到亮色模式的颜色，同时更新按钮文本为“Dark mode is on”。
    • 如果不包含，说明当前是亮色模式，则添加dark-mode类，并将页面切换到暗黑模式的颜色，同时更新按钮文本为“Dark mode is off”。
    • 关键一步： 在切换模式后，将当前的背景色和文本颜色通过localStorage.setItem()保存起来。这样，即使刷新页面或关闭浏览器，用户的偏好也会被记住。

完整代码示例

为了方便您测试，这里提供了完整的HTML、CSS和J*aScript代码。您可以将它们分别保存为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><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">J*a免费学习笔记（深入）</a>”；</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 s*edBgColor = localStorage.getItem("bgColor");
    var s*edTextColor = localStorage.getItem("textColor");

    if (s*edBgColor && s*edTextColor) {
        // 应用保存的颜色
        body.style.backgroundColor = s*edBgColor;
        body.style.color = s*edTextColor;

        // 根据保存的颜色判断是否为暗黑模式，并更新CSS类和按钮文本
        if (s*edBgColor === DARK_MODE_BG && s*edTextColor === 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元素获取和事件监听器等逻辑封装到更独立的模块或函数中，以提高代码的可维护性。

总结

通过本教程，您已经学会了如何使用纯J*aScript、CSS和localStorage实现一个功能完整的网页暗黑模式切换功能。这个方案不仅提供了用户友好的交互，还通过localStorage实现了用户偏好的持久化，极大地提升了用户体验。在此基础上，您可以根据自己的项目需求进行进一步的扩展和优化，例如支持更多主题、为特定元素应用暗黑模式样式，或与其他前端框架集成。

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


# 模式下  # 用seo咋样发作品  # 姑苏区seo推广网站  # 深圳短视频营销推广价格  # 免费建设物流网站  # 南京智能防护网站建设  # seo首页的内页链接  # 武汉大气网站建设电脑  # 人家网站是怎么优化的  # 物流网站建设品牌  # 眉山互联网推广营销招聘  # 您可以  # 背景色  # 首次  # 移除  # 设置为  # css  # 如何使用  # 加载  # 切换到  # 点  # 持久化存储  # css样式  # 网页设计  # ai  # ssl  # 浏览器  # 前端  # js  # html  # java  # javascript 


相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】


相关推荐： Go语言反射机制下访问嵌入结构体中的被遮蔽方法  在J*a中如何实现类的继承与方法重用_OOP继承方法重用技巧分享  从J*a应用程序中导出MySQL表数据的技术指南  C#解析并修改XML后保存 如何确保格式与编码的正确性  Win10运行窗口在哪里打开 Win10调出运行命令框快捷键【技巧】  rabbitmq 持久化有什么缺点？  C++如何使用CMake构建项目_C++ CMakeLists.txt编写入门教程  西瓜视频怎么查看访客记录_西瓜视频访客记录查看方法  邮政快递寄件查询入口 邮政快递收件查询入口  《爱南宁》认证电动车方法  抖音小程序怎么开通？小程序开通条件是什么？  iPhone17Pro如何连接蓝牙耳机_iPhone17Pro蓝牙设备配对与连接方法介绍  苹果自助维修计划支持哪些设备机型  《环球网校》设置报考省市方法  极兔快递官网查询入口手机版 手机极兔快递登录查询入口官方  WPS文字如何进行简繁转换  J*aScript 数值去小数位处理：多种方法与实践  BunnyStream TUS视频上传指南：解决401认证错误与参数配置  研招网官方网站招生平台入口_中国研究生招生信息网官网登录  如何解决Casbin日志与应用日志不统一的问题，使用casbin/psr3-bridge实现无缝集成  抖音号怎么解除企业认证改成个人？改成个人有影响吗？  TikTok搜索结果不显示怎么办 TikTok搜索刷新与优化方法  包子漫画官网链接官方地址 包子漫画在线观看官网首页入口  如何使用 composer 和 aop-php 实现 AOP 编程？  漫蛙官网(首页入口)_漫蛙漫画稳定访问教程分享  优化Leaflet弹出层图片显示：条件渲染策略  Python实时数据流中高效查找最大最小值  《i莞家》修改昵称方法  C++中std::thread和std::async的区别_C++并发编程与线程与异步任务比较  荣耀 Magic10 Pro 系统更新提示失败_荣耀 Magic10 Pro 升级修复  如何在mysql中使用索引提示_mysql索引提示优化方法  POKI小游戏在线免费入口链接 POKI小游戏无下载秒玩玩  《大周列国志》皇帝律令功能介绍  漫蛙app官方版手机正版入口-漫蛙漫画manwa在线漫画正版入口  快递物流路径揭秘  招商淘客入门指南  店铺如何关联视频号推广？视频号推广有什么用？  Yandex浏览器官方入口_Yandex搜索引擎中文版  AO3中文版手机快速通道_AO3最新稳定链接更新  Golang如何使用crypto/md5生成哈希_Golang MD5哈希生成方法  word表格如何按某一列内容进行排序_Word表格按列排序方法  《东方财富》条件单关闭方法  修复UI元素交互障碍：从“开始”按钮到信息框的平滑过渡实现  Git命令与VS Code UI操作的对应关系解析  铁拳8在线玩 铁拳8在线秒玩入口  申通快件单号查询平台 申通包裹物流动态跟踪  Python csv 模块处理非字符串数据：列表写入 CSV 文件的机制解析  LocoySpider如何批量采集电商商品_LocoySpider电商采集的模板应用  PDF文件去水印平台入口 PDF水印删除网址  怎样让Windows 11的开始菜单恢复经典样式_Open-Shell工具使用指南【怀旧】 

 2025-11-23

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。

4008744355

 8156699

 13765294890

 8156699@qq.com

服务/方案/案例/支持

产品服务
Google推广
社交推广
网站建设
Bing 推广
Yandex推广
解决方案
B2B网站推广
B2C电商推广
海外品牌推广
APP海外推广
营销案例
品牌营销推广
B2C电商推广
B2B海外推广
APP应用游戏
营销网站案例
营销学院
Google疑问
Facebook疑问
优化推广
技术知识
IDC资讯
网络运营
IT资讯

关于我们

公司简介
报名培训
加入我们

©  运城市盐湖区信雨科技有限公司 版权所有 晋ICP备2025069848号 

Notice

We and selected third parties use cookies or similar technologies for technical purposes and, with your consent, for other purposes as specified in the cookie policy.
You can consent to the use of such technologies by closing this notice, by interacting with any link or button outside of this notice or by continuing to browse otherwise.