首页 专区 Skill 文章 专题 AI工具 学习 编程手册

PHP MySQL jquery HTML CSS
首页 > web前端 > js教程

解决页面刷新后暗模式切换图标不同步的问题

云辰君_6502

云辰君_6502

2025-12-09

598人浏览

原创

解决页面刷新后暗模式切换图标不同步的问题

本教程详细讲解如何确保网页的暗模式切换图标在页面刷新后依然能正确反映当前的暗模式状态。通过分析原始代码的问题，我们将展示如何利用 `localstorage` 存储的状态，在页面加载时同步更新图标的显示，从而提供一致的用户体验。核心在于修改切换函数以同时管理图标可见性，并在页面初始化时根据存储状态调用这些函数。

引言：暗模式状态持久化与图标同步挑战

在现代网页设计中，暗模式（Dark Mode）已成为一项广受欢迎的功能，它能有效缓解眼部疲劳并改善用户体验。通常，我们会使用 localStorage 来持久化用户的暗模式偏好，确保用户刷新页面后依然保持其选择的模式。然而，一个常见的问题是，尽管页面本身能正确加载暗模式，但负责切换模式的图标（例如月亮图标切换为太阳图标）却可能在页面刷新后恢复到其默认状态，导致用户体验上的不一致。

本文将深入探讨这一问题，并提供一个完善的解决方案，确保暗模式状态与对应的切换图标始终保持同步。

现有实现分析

首先，我们来看一下一个典型的暗模式切换实现，它包含了HTML结构、CSS样式和JavaScript逻辑。

HTML 结构

<button id="dark-mode-toggle" class="dark-mode-toggle" aria-label="toggle dark mode">
  <i class="bx bx-moon moon" id="moon"></i>
  <i class="bx bx-sun sun" id="sun"></i>
</button>

这个按钮包含两个图标：一个月亮图标（#moon）和一个太阳图标（#sun），用于表示暗模式的开关状态。

CSS 样式

/* Darkmode */
.dark-mode-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
}

#moon {
  color: var(--a-clr);
  font-size: 2rem;
  display: block; /* 默认显示 */
}

#sun {
  font-size: 2rem;
  color: var(--a-clr);
  display: block; /* 默认显示 */
}
/* 注意：这里两个图标都设置为 display: block，这意味着它们会同时显示，这是需要修正的。 */

/* 暗模式激活时，通过CSS控制页面整体风格 */
html.darkmode {
  /* 例如：背景色变深，文字颜色变浅 */
  --bg-clr: #1a1a1a;
  --text-clr: #f0f0f0;
}

原始CSS中，#moon 和 #sun 都被设置为 display: block，这意味着它们在页面加载时会同时显示，这是不符合逻辑的。我们需要确保在任何时候只有一个图标可见。

JavaScript 逻辑

let darkMode = localStorage.getItem("darkMode");
const sun = document.getElementById("sun");
const moon = document.getElementById("moon");
const darkModeToggle = document.querySelector("#dark-mode-toggle");

const enableDarkMode = () => {
  document.documentElement.classList.add("darkmode");
  localStorage.setItem("darkMode", "enabled");
};

const disableDarkMode = () => {
  document.documentElement.classList.remove("darkmode");
  localStorage.setItem("darkMode", null);
};

darkModeToggle.addEventListener("click", () => {
  darkMode = localStorage.getItem("darkMode"); // 重新获取当前状态
  if (darkMode !== "enabled") {
    enableDarkMode();
  } else {
    disableDarkMode();
  }
});

问题根源分析

上述JavaScript代码存在两个主要问题：

  1. 图标可见性未管理： enableDarkMode 和 disableDarkMode 函数只负责添加/移除 document.documentElement 上的 darkmode 类以及更新 localStorage。它们并没有直接控制 #moon 和 #sun 这两个图标的显示与隐藏。因此，即使暗模式状态切换了，图标也不会随之改变。
  2. 页面加载时未初始化图标状态： 代码中缺少在页面首次加载时，根据 localStorage 中 darkMode 的值来初始化图标显示状态的逻辑。当页面刷新时，darkMode 变量会被重新赋值，但图标的 display 属性并没有被更新，导致图标可能恢复到其默认的CSS状态（即两个都显示，或者根据CSS规则显示其中一个）。

同步图标状态的解决方案

要解决上述问题，我们需要在以下几个方面进行改进：

Java Api Extractor
Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

步骤一：调整图标的初始CSS（可选但推荐）

为了确保在JavaScript加载之前，页面有一个合理的初始状态，我们可以在CSS中默认隐藏其中一个图标。例如，默认显示月亮图标（表示当前是亮模式，可切换到暗模式），隐藏太阳图标。

/* Darkmode */
.dark-mode-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
}

#moon {
  color: var(--a-clr);
  font-size: 2rem;
  display: block; /* 默认显示月亮图标 */
}

#sun {
  font-size: 2rem;
  color: var(--a-clr);
  display: none; /* 默认隐藏太阳图标 */
}

步骤二：修改 enableDarkMode 和 disableDarkMode 函数

现在，我们需要让这两个函数不仅处理 document.documentElement 的类和 localStorage，还要显式地切换月亮和太阳图标的可见性。

const enableDarkMode = () => {
  document.documentElement.classList.add("darkmode");
  localStorage.setItem("darkMode", "enabled");
  // 切换图标显示：隐藏月亮，显示太阳
  moon.style.display = "none";
  sun.style.display = "block";
};

const disableDarkMode = () => {
  document.documentElement.classList.remove("darkmode");
  localStorage.setItem("darkMode", null);
  // 切换图标显示：显示月亮，隐藏太阳
  moon.style.display = "block";
  sun.style.display = "none";
};

步骤三：页面加载时初始化图标状态

这是解决页面刷新后图标不同步的关键。在所有函数定义之后，但在事件监听器之前，我们需要添加一个条件判断，根据 localStorage 中 darkMode 的初始值来调用 enableDarkMode 或 disableDarkMode。这样，当页面加载时，无论 localStorage 中存储的是什么状态，图标都会立即被调整到正确的位置。

// ... (之前的变量定义，如 let darkMode, const sun, moon, darkModeToggle) ...

// 在页面加载时，根据localStorage中的状态初始化暗模式和图标显示
if (darkMode === "enabled") {
  enableDarkMode(); // 如果暗模式已启用，则设置页面为暗模式并显示太阳图标
} else {
  disableDarkMode(); // 否则，设置页面为亮模式并显示月亮图标
}

darkModeToggle.addEventListener("click", () => {
  // 在每次点击时重新获取最新的darkMode状态
  darkMode = localStorage.getItem("darkMode");
  if (darkMode !== "enabled") {
    enableDarkMode();
  } else {
    disableDarkMode();
  }
});

完整代码示例

将上述修改整合后，一个功能完善的暗模式切换器及其图标同步机制如下：

HTML (保持不变)

<button id="dark-mode-toggle" class="dark-mode-toggle" aria-label="toggle dark mode">
  <i class="bx bx-moon moon" id="moon"></i>
  <i class="bx bx-sun sun" id="sun"></i>
</button>

CSS (更新图标初始显示)

/* Darkmode */
.dark-mode-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
}

#moon {
  color: var(--a-clr);
  font-size: 2rem;
  display: block; /* 默认显示月亮图标 */
}

#sun {
  font-size: 2rem;
  color: var(--a-clr);
  display: none; /* 默认隐藏太阳图标 */
}

/* 暗模式激活时，通过CSS控制页面整体风格 */
html.darkmode {
  /* 例如：背景色变深，文字颜色变浅 */
  --bg-clr: #1a1a1a;
  --text-clr: #f0f0f0;
}

JavaScript (核心逻辑)

let darkMode = localStorage.getItem("darkMode");
const sun = document.getElementById("sun");
const moon = document.getElementById("moon");
const darkModeToggle = document.querySelector("#dark-mode-toggle");

// 启用暗模式的函数：设置页面类、存储状态、更新图标
const enableDarkMode = () => {
  document.documentElement.classList.add("darkmode");
  localStorage.setItem("darkMode", "enabled");
  moon.style.display = "none"; // 隐藏月亮
  sun.style.display = "block"; // 显示太阳
};

// 禁用暗模式的函数：移除页面类、存储状态、更新图标
const disableDarkMode = () => {
  document.documentElement.classList.remove("darkmode");
  localStorage.setItem("darkMode", null); // 或者 "disabled"
  moon.style.display = "block"; // 显示月亮
  sun.style.display = "none"; // 隐藏太阳
};

// 页面加载时，根据localStorage中的状态初始化暗模式和图标显示
if (darkMode === "enabled") {
  enableDarkMode();
} else {
  disableDarkMode();
}

// 绑定点击事件监听器
darkModeToggle.addEventListener("click", () => {
  // 每次点击时重新从localStorage获取最新状态，确保一致性
  darkMode = localStorage.getItem("darkMode");
  if (darkMode !== "enabled") {
    enableDarkMode();
  } else {
    disableDarkMode();
  }
});

注意事项与最佳实践

  • localStorage 键值： 在 disableDarkMode 中，将 darkMode 设置为 null 是可行的，但为了更清晰地表示“已禁用”，可以考虑设置为 "disabled"。只要在判断逻辑中保持一致即可。
  • CSS类切换： 对于更复杂的UI或动画效果，直接操作 style.display 可能不够灵活。一种更推荐的做法是通过添加/移除CSS类来控制图标的可见性，例如 .icon-hidden { display: none; }，然后通过JS切换这个类。
  • 可访问性： 确保 aria-label 属性准确描述按钮的功能，例如在暗模式下可以更新为 "toggle light mode"。
  • 用户首次访问： 如果 localStorage 中没有 darkMode 的记录，上述代码会默认调用 disableDarkMode()，即显示亮模式。这是合理的默认行为。
  • 性能： 直接操作 style.display 对于少量元素是高效的，但对于大量元素，CSS类切换通常具有更好的性能和维护性。

总结

通过上述改进，我们成功解决了暗模式切换图标在页面刷新后不同步的问题。核心在于两点：一是让暗模式切换函数（enableDarkMode 和 disableDarkMode）不仅管理页面的 darkmode 类和 localStorage 状态，还要同时管理图标的可见性；二是在页面加载时，根据 localStorage 中存储的暗模式状态，立即调用相应的切换函数来初始化页面的模式和图标显示。这种方法确保了用户无论何时访问或刷新页面，都能获得一致且符合预期的暗模式体验。

相关文章

如何在按钮中实现左对齐箭头与居中文字的混合布局

如何在按钮中实现左对齐箭头与居中文本的混合布局

Nginx 中怎么排查 HTTPS 网页中加载 HTTP 资源被浏览器拦截

如何在现代CSS中用OKLCH替代传统透明度做更自然的遮罩？

如何在CSS中使用Flex构建自适应两侧固定中间撑满的三栏布局？
PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载

相关标签:

css javascript java html js ssl 网页设计 css样式 点击事件 同步机制

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：JavaScript中什么是ServiceWorker_缓存策略

下一篇：javascript的尾调用优化是什么_它如何工作？

作者最新文章

如何通过 AJAX 按钮点击向 PHP 传递任务 ID 并安全获取数据

jQuery 实现导航菜单折叠展开时动态切换箭头图标（右箭头 ↔ 下箭头）

如何通过 AJAX 按钮点击向 PHP 传递任务 ID 并正确接收处理

如何使用原生 JavaScript 重置文件输入框（无需 jQuery）

如何在 JavaScript 中正确地将连字符替换为带样式的 div 元素

如何使用纯 JavaScript 重置文件输入框（无需 jQuery）

如何使用纯 JavaScript 重置文件输入框（File Input）

Vue 3 中动态绑定 img src 的正确方法

如何在 JavaScript 中合并嵌套数组并去重

JavaScript 中合并嵌套数组并去重的完整教程

热门AI工具

更多
蛙蛙写作

蛙蛙写作

Hot 切问学术

切问学术

Hot UP简历

UP简历

Hot Atoms

Atoms

Hot 花生AI

花生AI

Hot UpDream

UpDream

Hot DeepSeek

DeepSeek

 豆包大模型

豆包大模型

相关专题

更多
c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是：null是C语言中的一个宏定义，通常用来表示一个空指针，可以用于初始化指针变量，或者在条件语句中判断指针是否为空；NULL是C语言中的一个预定义常量，通常用来表示一个空值，用于表示一个空的指针、空的指针数组或者空的结构体指针。

2023.09.22

549

3

java中null的用法
java中null的用法

在Java中，null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量，包括类、接口、数组、字符串等。想了解更多null的相关内容，可以阅读本专题下面的文章。

2024.03.01

1698

6

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

2023.06.20

4636

8

js获取当前时间
js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

2023.07.28

1395

5

js 字符串转数组
js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

2023.08.03

1818

5

js是什么意思
js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

2023.08.17

10183

11

js删除节点的方法
js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

2023.09.01

1000

4

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

2023.09.04

2904

5

Js中concat和push的区别
Js中concat和push的区别

Js中concat和push的区别：1、concat用于将两个或多个数组合并成一个新数组，并返回这个新数组，而push用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度；2、concat不会修改原始数组，是创建新的数组，而push会修改原数组，将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容，供大家免费下载体验。

2023.09.14

1609

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
MDPHP(麦迪php框架系统)1.1
PHP 多国语言框架2.0
ujframe简单快速PHP开发框架1.0
php轻量型框架1.0
MyQEE开源PHP多项目及模块化开发框架3.0 RC2
php开源学习型框架CMVC1.2.0
PHP框架Kohana3.3.1

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 1.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 6.1万人学习

CSS教程
CSS教程

共754课时 | 99.5万人学习

最新文章

更多
如何在 Markdown 中正确格式化多行代码块
JavaScript 中合并嵌套数组并去重的完整教程
如何在 JavaScript 中合并嵌套数组并去重
Vue 3 中动态绑定 img src 的正确方法
如何使用纯 JavaScript 重置文件输入框（File Input）
如何使用纯 JavaScript 重置文件输入框（无需 jQuery）
如何在 JavaScript 中正确地将连字符替换为带样式的 div 元素
如何使用原生 JavaScript 重置文件输入框（无需 jQuery）
如何通过 AJAX 按钮点击向 PHP 传递任务 ID 并正确接收处理
jQuery 实现导航菜单折叠展开时动态切换箭头图标（右箭头 ↔ 下箭头）