如何切换多种CSS样式来制作深色模式？

Question

我使用 HTML、CSS 和 JavaScript 来构建我的网站。我想添加一个深色模式切换按钮，因此通过单击，它将切换到深色/浅色模式，但我的 JavaScript 脚本仅适用于一种css 样式 - body. 但实际上，我有很多div，它们是浅色的，但它们不会因颜色而改变。

这是我的 HTML 代码（带有 JS<script>容器）：

我怎样才能解决这个问题，通过点击按钮我可以让我的网站变成暗模式？

function darkMode() {
  var element = document.body
  element.classList.toggle("dark-mode");
  element.classList.toggle("yeaaaaaa");
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #fff;
}

.dark_mode {
  background-color: #000;
}

.yeaaaaaa {
  background-color: #111;
}


/* main styles */

.main {
  display: grid;
  background-color: #f5f7fa;
  grid-template-columns: 22.15em auto;
  grid-template-rows: auto auto;
}

.grid-item {
  background: #1e2939;
}

.photo-coverup {
  display: flex;
  align-items: flex-end;
}

.info-name {
  color: #1e2939;
  margin-bottom: 5px;
}

.info-list {
  color: #1e2939;
  margin-bottom: 25px;
}

.info-yee {
  color: #1e2939;
  width: 400px;
}


/* about styles */

.about {
  background-color: #F1F9fc;
  padding: 15px 120px 10px 50px;
}

.info {
  color: #1e2939;
}

.texx-alt {
  font-style: normal;
  color: black;
}

#delegar {
  position: fixed;
  right: 10px;
  top: 10px;
  width: 90px;
  height: 35px;
  border: none;
  outline: none;
  color: #87c9f5;
  background: #1e2939;
  cursor: pointer;
  z-index: 0;
  border-radius: 15px 0 0 15px;
  -webkit-transition: ease-in 1s;
  transition: color 1s;
}

#delegar:hover {
  color: #1e2939;
  background-color: #87c9f5;
  font-weight: bold;
}

<!--Main-->
<div class="main grid">
  <div class="photo-coverup grid-item">
    <img src="img/Profile pic.jpg" alt="Dude Pic" class="photo">
  </div>
  <!--About User-->
  <span>
        <div class="about grid-item yeaaaaaa">
          <p class="info">
          <h2 class="info">Developer and Graphic Designer</h2>
          <h1 class="info-name">George Mos</h1>
          <p class="info-yee">
            My name is George (GMos) Mos. I'm a graphic designer and programmer. I have:
          </p>
          <ul class="info-list">
            <li class="info-section-list-component">4-year-experience in Adobe Photoshop and Adobe Illustrator</li>
            <li class="info-section-list-component">3-year-experience in programming
              (Python, HTML5, Bash and JavaScript)</li>
          </ul>
          <p class="info">I'm from Ukraine, Kyiv. I work as a freelancer and, usually, my work consists
            of creating logos, wallpapers, art and/
            or making softwares, programs and websites. My life motto: "Optimistic and ambitious"
          </p>
          <p class="info">In my spare time I often lay back in Discord either texting or taking part in a voice
            channels. If you wanna join, don't hesitate yourself by following the "Discord" link in "Social Media"
            section! (or you can just <a href="https://discord.gg/PGkJgQtCwZ" class="texx-alt">click here</a> though)
          </p>
          </p>
        </div>
      </span>
  <div>
    <button onclick="darkMode()" id="delegar">Dark Mode</button>
  </div>

Answer 1

只需使用 JavaScript 将类添加dark-mode到标签中，然后在它们前面body定义所有深色样式，如下所示：.dark-mode

a {
    color: #330033; /* or whatever dark color */
}

.dark-mode a {
    color: white; /* or whatever light color */
}

有关 CSS 特异性和级联的更多信息，请参阅此页面：

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

我建议将所有暗模式样式分组在一起，并在它们上面添加注释，就像这样/* Dark mode styles: */，并将它们放在样式表的底部（在任何响应断点之上），这样它们就在一起了，并且它们在您的常规样式之后- 因为 CSS采用最后定义的样式（因此，级联）。这样您就不会遇到重新定义样式的问题。确保所有覆盖样式比它们尝试覆盖的样式具有更多特异性。!important尽可能避免使用。