javascript - 如何创建一个 jQuery 函数来切换暗模式？

Question

我正在为我的网站设计深色模式。鉴于我有很多书面内容，这对晚上阅读特别有帮助。我有一个开关并借用了一个到目前为止似乎有效的功能:

$(function() {
  $(".switch").click(function() {
    $("#canvas-wrapper").css("background", "#222");
    $("p").css("color", "#DDD");
    });
});

我希望用户根据需要打开和关闭这些更改。但是，当我尝试添加另一行时 - 为另一个元素定义 css 更改 - 该函数仅将样式应用于第一个 #canvas-wrapper 元素。此后的所有内容都将被忽略。

函数后面的语法不正确吗？此外，如果用户停用切换，我需要以一种将 CSS 返回到其原始状态的方式编写函数。我将如何处理这个？

我对 jQuery 很不了解，也没有太多使用该语言的经验。

Answer 1

无需更改每个元素，您可以在 CSS 中定义深色模式样式，然后使用 jQuery 来切换深色模式类。

我假设点击 .switch 两次会将其改回浅色模式，并且您当前的 CSS 默认显示浅色模式样式。

CSS:

#canvas-wrapper.dark-mode {
  background: #222;
  color: #DDD;
}

jQuery:

$(function() {
  $(".switch").click(function() {
    $("#canvas-wrapper").toggleClass("dark-mode");
  });
});

如果愿意，您也可以使用 CSS 变量。但是，它仍然会涉及代码中某处的类切换/更改。使用 CSS 变量但使用 vanilla JS:https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8