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

Question

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

$(function() {

  $(".switch").click(function() {

    $("#canvas-wrapper").css("background", "#222");

    $("p").css("color", "#DDD");

    });

});

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

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

我对 jQuery 的使用很差，并且对这门语言没有很多经验。

Answer 1

您可以通过一些技巧来解决这个问题，您的问题的直接答案是通过为暗/亮主题实现切换类。例如你看这个演示<div class="change-color">&nbsp; <p>Hello World</p></div><div class="change-color">&nbsp; <p>Hello World 2</p></div><button>Change color</button>和我们的脚本：// find elementsvar anotherColor = $(".change-color")var button = $("button")// handle click and add classbutton.on("click", function(){&nbsp; anotherColor.toggleClass("another-color")})和我们的风格：body {&nbsp; background: #000;&nbsp; color: red;}button {&nbsp; background: #0084ff;&nbsp; border: none;&nbsp; border-radius: 5px;&nbsp; padding: 8px 14px;&nbsp; font-size: 15px;&nbsp; color: #fff;}.another-color {&nbsp; background: #ddd;}但是您也可以通过使用根变量颜色来解决问题，例如：:root {&nbsp; --color-bg: #000;}.default-color {&nbsp; background-color: var(--color-bg);}.another-color {&nbsp; --color-bg: #ddd;}你可以看一下这个演示过

Answer 2

您可能需要为每个元素编写一些 css，无论是在亮模式还是暗模式下。使用 javascript 在两者之间切换。您可以有一个用于浅模式 (.light-mode) 的类，然后是用于暗模式的类。只要 class-wrapper 是一个 div，你应该没问题。我会使用一个具有全局访问权限的 js 变量来访问模式并将其绑定到一个函数中。css.light-mode{&nbsp; &nbsp; some more css classes for light mode}.dark-mode{&nbsp; &nbsp; some more css classes for dark mode}