Question

我一直在尝试在练习网页上添加深色模式，它可以更改主体背景颜色，但不适用于按钮，代码为：

该代码在.icons CSS类上不起作用，它在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: ... }定义的，因此，即使同时设置了.icons类，darkmode也会获胜。

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

Answer 2

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

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

class Food(): # create a food class
    def __init__(self, type_):
        self.type = type_
        self.value = 0

    def increment(self):
        self.value += 1

    def __lt__(self, other):
        return self.value < other.value

    def __le__(self, other):
        return self.value <= other.value

    def __gt__(self, other):
        return self.value > other.value

    def __ge__(self, other):
        return self.value >= other.value

    def __eq__(self, other):
        return self.type == other.type

foods = [Food("pizza"), Food("burger"), Food("hot dog")] # make some foods
food_STRING = []

for i in foods:
    food_STRING.append(i.type)

for i in range(10):
    food = input("Food:")
    foods[food_STRING.index(food)].increment()

sorted_food = sorted(foods)

print(sorted_food[-1].type, sorted_food[-2].type)

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

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

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

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

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

</style>

已经详细讨论过here

网页上的JS暗模式

2 个答案: