首页 > 文章 > 前端

纯JS实现暗黑模式切换与保存方法

时间：2025-12-17 16:15:35 212浏览收藏

推广推荐

支持 PC / 移动端，安全直达

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《纯JS实现暗黑模式持久化切换方法》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

使用纯JavaScript实现可持久化用户偏好的暗黑模式切换

本教程详细介绍了如何使用纯JavaScript实现一个暗黑模式切换功能。通过一个简单的切换按钮，用户可以轻松地在亮/暗模式之间切换，并且系统会利用 `localStorage` 记住用户的选择，确保在页面重新加载后依然保持用户偏好，无需依赖任何第三方库。

在现代网页设计中，为用户提供暗黑模式（Dark Mode）选项已成为一种趋势，它不仅能改善用户体验，尤其是在低光环境下，还能减少眼睛疲劳。本教程将指导您如何使用纯JavaScript，不依赖任何库，实现一个功能完善的暗黑模式切换器，并利用 localStorage 持久化用户的选择。

核心技术概览

实现这一功能主要依赖以下Web技术：

HTML: 提供一个简单的按钮作为切换开关。
CSS: 定义亮/暗模式下的基本样式，特别是通过一个特定的CSS类来封装暗黑模式的样式。
JavaScript:
- DOM操作: 获取并操作HTML元素。
- 事件监听: 响应用户的点击事件。
- classList API: 方便地添加、移除或切换元素的CSS类。
- localStorage API: 在浏览器端存储用户偏好，实现数据持久化。

实现步骤

我们将分三部分构建这个功能：HTML结构、CSS样式和JavaScript逻辑。

1. 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>
    <button id="toggleBtn">暗黑模式已开启</button>
    <p>这是一段示例文本，用于演示亮/暗模式下的字体颜色变化。</p>
    <p>点击上方按钮即可切换页面主题。</p>
    <script src="script.js"></script>
</body>
</html>

这里我们创建了一个ID为 toggleBtn 的按钮，并预设其初始文本为“暗黑模式已开启”。请注意，script.js 文件在 body 结束标签前引入，以确保DOM元素在脚本执行时已加载。

2. CSS 样式

接下来，定义两种模式下的基本样式。我们将为 body 元素定义一个默认的亮模式样式，并通过 .dark-mode 类来定义暗黑模式的样式。

/* style.css */
body {
    margin: 0;
    height: 100vh; /* 确保body占据整个视口高度 */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease; /* 添加平滑过渡效果 */
    background-color: #FFFFFF; /* 默认亮模式背景 */
    color: #101010; /* 默认亮模式字体颜色 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 暗黑模式样式 */
body.dark-mode {
    background-color: #101010;
    color: #FFFFFF;
}

/* 按钮基础样式 (可选) */
#toggleBtn {
    padding: 12px 25px;
    margin-bottom: 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    background-color: #007bff;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease, transform 0.1s ease;
}

#toggleBtn:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
}

#toggleBtn:active {
    transform: translateY(1px);
}

今天关于《纯JS实现暗黑模式切换与保存方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！