网页上通过 JS 的暗模式

Question

我一直在尝试在练习网页上添加黑暗模式，它可以改变正文背景颜色，但不适用于按钮，代码是：

该代码在 .icons CSS class 中不起作用，它出现在 chrome 中，但不起作用，

非常感谢解释。

谢谢

document.querySelector(".slider-button").addEventListener("input", function(){
  document.querySelector("#data-left").innerHTML = this.value;
})

document.querySelector(".slider-button").addEventListener("input", function(){
  document.querySelector(".gb-left").innerHTML = 1000-this.value;
})

document.querySelector(".button-color-mode").addEventListener("click", function(){
  document.body.classList.toggle("darkmode");
  document.querySelector(".icons").classList.toggle("darkmode");
})

body {
  position: fixed;
  background-color: hsl(229, 57%, 11%);
  background-image: url("images/bg-desktop.png");
  background-position: center 400px;
  background-repeat: no-repeat;
  background-size: cover;
}
.button-color-mode{
  background-color: black;
  color: white;
  outline: none;
  border-radius: 15px;
}

.darkmode{
  background-color: white;
}

.icons {
  background-color: hsl(229, 57%, 11%);
  border-style: none;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  padding: 10px;
  margin: 5px;
  outline: none;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
  <link rel="icon" href="images/favicon-32x32.png">
  <link rel="stylesheet" href="styles.css">
  <title>Fylo Data Storage</title>
</head>

<body>
      <button class="icons" type="button"><img src="images/icon-document.svg" alt="" name="button"></button>
      <button class="icons" type="button"><img src="images/icon-folder.svg" alt="" name="button"></button>
      <button class="icons" type="button"><img src="images/icon-upload.svg" alt="" name="button"></button>
</html>

Answer 1

在 CSS 中，选择器的定义顺序很重要。当一个规则（例如 background-color）在具有相同特性的多个选择器中定义时，最后定义的那个将覆盖任何先前的定义。

在这种情况下，.icons { background-color: ... } 定义在 .darkmode { background-color: ... } 之后，因此即使 darkmode .icons“获胜”class 也已设置。

换句话说：将 .darkmode 块移动到 .icons 块下方。

Answer 2

您不需要 jQuery 来实现这个基本功能。

此方法使用按钮在浅色（默认）和深色模式之间手动切换。

<html lang="en">
<head>
    <title>Dark Mode</title>
</head>
<body>
        <h1>Dark mode demo</h1>
        <button onclick="switch_mode()">Dark</button>
        <p> 
           Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat odio repellendus neque illum explicabo architecto minima eligendi expedita
        </p>     
</body>
</html>

<style>
        html {font-size: 100%;}

        body {
            font-weight: 400;
            line-height: 1.75;
            color: #3f0d7d;
        }

        .dark-mode {
            background: #3e3939;
            color: white;
        }

</style>

以下 js 脚本将黑暗模式 class 切换到 body 元素。

<script>
    //this function is called when the button is clicked
    function switch_mode(){
        const element = document.body;
        element.classList.toggle('dark-mode');
    }
</script>

已详细讨论here

网页上通过 JS 的暗模式

Dark mode through JS on a webpage

html

javascript

css

darkmode