jQuery 实现 HTML 页面暗色模式切换的完整教程-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 选择器字符串必须用单引号或双引号包裹：