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

Question

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

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

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

函数后面的语法是否正确？ 另外，如果用户停用了切换功能，则需要以将CSS返回其原始状态的方式编写函数。 我将如何处理？

我对jQuery相当陌生，并且没有大量的语言经验。

Answer 1

您可能必须为每个元素在亮或暗模式下编写一些CSS。 使用javascript在两者之间切换。 您可以为亮模式（.light-mode）设置一类，然后为暗模式设置一类。 只要class-wrapper是div，就可以了。

我将对模式使用具有全局访问权限的js变量并将其绑定到函数中。

的CSS

.light-mode{


    some more css classes for light mode

}

.dark-mode{


    some more css classes for dark mode

}

Answer 2

您可以在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变量但使用香草JS： https : //dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8

Answer 3

您需要将CSS与目标类一起使用。 jQuery toggleClass()将完成这项工作

 .bgDark{background: #4a4a4a !important;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myDiv" class="" style="background: #fff393; border: 1px solid black; width: 100px; height: 100px"></div> <button onclick="$('#myDiv').toggleClass('bgDark')">toggle bg</button> 

Answer 4

您可以通过一些技巧来解决此问题，您的问题的直接答案是通过实现深色/浅色主题的toggleClass。

例如你看这个演示

<div class="change-color">
  <p>Hello World</p>
</div>

<div class="change-color">
  <p>Hello World 2</p>
</div>

<button>Change color</button>

和我们的脚本：

// find elements
var anotherColor = $(".change-color")
var button = $("button")

// handle click and add class
button.on("click", function(){
  anotherColor.toggleClass("another-color")
})

和我们的风格：

body {
  background: #000;
  color: red;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

.another-color {
  background: #ddd;
}

但是您也可以通过使用根变量颜色来解决问题，例如：

:root {
  --color-bg: #000;
}

.default-color {
  background-color: var(--color-bg);
}

.another-color {
  --color-bg: #ddd;
}

您也可以看一下这个演示