本文详解如何使用 jquery 快速为网页添加暗色/亮色主题切换功能，涵盖 css 自定义属性（css variables）、javascript 类名控制逻辑及常见错误排查（如选择器引号缺失）。
在现代网页开发中，暗色模式（Dark Mode）已成为提升用户体验与可访问性的重要特性。借助 CSS 自定义属性（CSS Custom Properties）和 jQuery 的简洁事件处理能力，我们可以在不依赖复杂框架的前提下，快速实现主题切换功能。
✅ 正确的实现步骤
1. HTML 结构（保持语义清晰）
确保图标元素具有唯一 ID，并置于合适位置：
<body>
<!-- 其他内容 -->
<div>
<nav>
<img src="images/dark-mode.png" id="icon" alt="切换深色/浅色模式">
</nav>
</div>
</body>? 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() 引用变量，否则样式不会动态响应。立即学习“前端免费学习笔记（深入）”；
java-api-doc-generator下载分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
3. jQuery 交互逻辑（关键修复点）
原始代码中存在一个典型语法错误：$(#icon) 缺少引号，导致选择器无效。jQuery 选择器字符串必须用单引号或双引号包裹：
$(function() {
$("#icon").on("click", function() {
document.body.classList.toggle("dark-theme");
});
});✅ 正确写法：$("#icon")
❌ 错误写法：$(#icon)（JS 解析为未定义变量 #icon，抛出 ReferenceError）
该逻辑通过原生 classList.toggle() 切换
的 dark-theme 类，从而触发 CSS 变量重计算，实现无缝主题切换。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 类正确挂载到
③ jQuery 选择器必须加引号——这是新手最常忽略却极易导致功能失效的细节。
只要遵循上述结构，你就能在几分钟内为任意静态页面赋予专业级的主题切换能力。
