使用纯JavaScript实现可持久化用户偏好的暗黑模式切换-js教程-PHP中文网

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

聖光之護

发布： 2025-11-23 11:04:35

原创

710人浏览过

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

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

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

核心技术概览

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

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

实现步骤

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

立即学习“Java免费学习笔记（深入）”；

Tana

“节点式”AI智能笔记工具，支持超级标签。

查看详情

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);
}

登录后复制

以上就是使用纯JavaScript实现可持久化用户偏好的暗黑模式切换的详细内容，更多请关注php中文网其它相关文章！