求助：使用jQuery实现网页暗黑模式功能失效问题排查

1. 核心错误：jQuery选择器语法问题 #

你的JS代码里的$(#icon)存在语法错误——jQuery的选择器必须用单引号或双引号包裹，正确写法应为$('#icon')或$("#icon")。这个错误会直接导致JavaScript执行中断，点击事件根本无法绑定，这是功能无响应的关键原因。

错误代码片段：

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

修复后代码：

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

2. 可选优化（非功能失效原因，提升代码简洁性） #

你已经通过document.getElementById("icon")获取了DOM元素，没必要重复用jQuery选择器，可以直接复用这个变量：

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

3. 验证与后续排查步骤 #

1. 打开浏览器开发者工具（F12），切换到Console面板，确认是否存在Uncaught SyntaxError: Unexpected token '#'这类语法报错。
2. 修复选择器后，刷新页面点击图标，在Elements面板查看body元素的class属性，确认dark-theme类是否能正常添加/移除。
3. 如果类切换正常但样式无变化，检查CSS变量作用域：当前.dark-theme加在body上，而:root是根元素，若后续样式不生效，可将变量定义移到body下，或把主题类加到根元素（即document.documentElement.classList.toggle("dark-theme")），确保变量覆盖优先级正确。

内容的提问来源于stack exchange，提问作者Julia Langford