jQuery 实现 HTML 页面暗色模式切换的完整教程

本文详解如何使用 jquery 快速为网页添加暗色/亮色主题切换功能，涵盖 css 自定义属性（css variables）、javascript 类名控制逻辑及常见错误排查（如选择器引号缺失）。

在现代网页开发中，暗色模式（Dark Mode）已成为提升用户体验与可访问性的重要特性。借助 CSS 自定义属性（CSS Custom Properties）和 jQuery 的简洁事件处理能力，我们可以在不依赖复杂框架的前提下，快速实现主题切换功能。

✅ 正确的实现步骤

1. HTML 结构（保持语义清晰）

确保图标元素具有唯一 ID，并置于合适位置：

? alt 属性增强可访问性，建议始终添加。

2. CSS：利用 :root 与类名作用域控制主题

通过 :root 定义默认（亮色）变量，再用 .dark-theme 类覆盖这些变量：

:root {
  --primary-color: #c2aaba;
  --secondary-color: linear-gradient(315deg, #d9e4f5 0%, #f5e3e6 74%);
}

.dark-theme {
  --primary-color: #181818;
  --secondary-color: linear-gradient(90deg, rgba(168,120,132,1) 0%, rgba(194,170,186,1) 54%, rgba(241,241,241,1) 100%);
}

body {
  font-family: 'Inconsolata', sans-serif;
  color: white;
  background: var(--primary-color);
  margin: 0;
  min-height: 100vh;
}

#icon {
  position: absolute;
  cursor: pointer;
  top: 10px;
  right: 20px;
  width: 30px;
  transition: transform 0.3s ease; /* 可选：增加点击反馈 */
}

#icon:hover {
  transform: scale(1.1);
}

⚠️ 注意：.dark-theme 类需直接作用于

才能影响 :root 下的变量继承链；同时确保 background 和 color 使用 var() 引用变量，否则样式不会动态响应。

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

3. jQuery 交互逻辑（关键修复点）

原始代码中存在一个典型语法错误：$(#icon) 缺少引号，导致选择器无效。jQuery 选择器字符串必须用单引号或双引号包裹：

Asp开源商城系统YothSHOP

YothSHOP是优斯科技鼎力打造的一款asp开源商城系统，支持access和Sql server切换，完善的会员订单管理，全站生成静态html文件，SEO优化效果极佳，后台XP模式和普通模式随意切换，极易操作，欢迎使用！ Asp开源商城系统YothSHOP功能介绍：1.使用静态页和程序页分离技术，网站可自由开启和关闭，实现全站生成静态页，可动静态切换，方便二次开发和后期维护。2.管理员管理：后台

下载

$(function() {
  $("#icon").on("click", function() {
    document.body.classList.toggle("dark-theme");
  });
});

✅ 正确写法：$("#icon")
❌ 错误写法：$(#icon)（JS 解析为未定义变量 #icon，抛出 ReferenceError）

该逻辑通过原生 classList.toggle() 切换

4. 进阶优化建议（可选）

• 持久化用户偏好：结合 localStorage 记住上次选择：

  $(function() {
    // 初始化：读取本地存储
    if (localStorage.getItem("theme") === "dark") {
      document.body.classList.add("dark-theme");
    }
  
    $("#icon").on("click", function() {
      document.body.classList.toggle("dark-theme");
      const isDark = document.body.classList.contains("dark-theme");
      localStorage.setItem("theme", isDark ? "dark" : "light");
    });
  });

• 支持系统级暗色偏好（自动适配）：

  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.body.classList.add("dark-theme");
  }

? 总结

实现 jQuery 驱动的暗色模式，核心在于三点：
① 使用 CSS 自定义属性解耦样式与逻辑；
② 确保 .dark-theme 类正确挂载到

只要遵循上述结构，你就能在几分钟内为任意静态页面赋予专业级的主题切换能力。