如何创建一个 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">

  <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;

}

你可以看一下这个演示过

Answer 2

您可能需要为每个元素编写一些 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

}