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实现此问题的答案。

例如，您查看此demo

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

您也可以查看此demo

需要帮助来创建jQuery函数以切换暗模式

4 个答案: