如何切换许多 css 样式来制作黑暗模式？

Question

我正在使用 HTML、CSS 和 JavaScript 来构建我的网站。我想添加一个 Darkmode 切换按钮，所以通过单击，它会切换到 Dark/Light 模式，但我的 JavaScript 脚本仅适用于 one 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

只需将 class dark-mode 添加到带有 JavaScript 的 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 采用最后定义的样式（因此，级联）。这样您就不会运行遇到 re-defining 样式的问题。确保所有覆盖样式都比它们试图覆盖的样式具有更多的特异性。尽可能避免使用 !important。

Answer 2

虽然 Sean Kendle 的方法可行，但如果您不需要担心较旧的浏览器，还有其他选项可能更简洁且实施起来更省力。我在下面提供了一些想法供您考虑。 CSS变量是最重要的。

SCSS

为了简化在 css 中的工作，您可以考虑使用 scss。

使用 scss 而不是使用 .dark-mode 作为所有深色样式的前缀，您可以将所有 dark-mode 样式嵌套在一个深色模式定义中。例如：

.dark-mode{

    background-color: black;

    a{
        color: white;
    }

    //any other dark styles

}

用户偏好媒体查询

为了进一步改进，考虑到 OS 通常允许人们在系统级别指定暗模式首选项，我们现在有一个 well-supported media query in CSS to detect that OS preference:

@media (prefers-color-scheme: dark) {

 //dark styles here.

}

Jason Pamental has an interesting article here on using the prefers dark media query, in addition to a user toggle on the site itself, and using css variables to switch styles in a simple powerful way. There's a demo of the concept here.

CSS 变量

如果您能够使用 css 变量，您可以只定义一次 css，然后简单地翻转变量以切换到暗模式。这是上述演示中 css 的简化版本，用于说明如何使用变量更改暗模式的颜色：

:root {

  --color-dark: #3a3a3a;
  --color-light: #eee;
  
  --color-text: var(--color-dark);
  --color-background: var(--color-light);
  
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  transition: background-color 0.25s ease, color 0.25s ease;
}


.dark-mode {
  /* flip the light and dark variables */
  --color-text: var(--color-light);
  --color-background: var(--color-dark);
}

Answer 3

我会使用 CSS 个变量 (w3schools)。您可以在 :root 中创建一些变量，例如明亮的背景或文本颜色，然后将它们分配给不同的元素。如果你想改成深色模式，只需要相应地改变变量（文本为亮色，背景为深色）：

:root {
    --text: #1e2939;
    --bg: #F1F9fc;
}

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

.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: var(--text);
    margin-bottom: 5px;
  }
  
  .info-list {
    color: var(--text);
    margin-bottom: 25px;
  }
  
  .info-yee {
    color: var(--text);
    width: 400px;
  }

  /* about styles */
  .about {
    background-color: var(--bg);
    padding: 15px 120px 10px 50px;
  }

.info {
    color: var(--text);
  }

.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: var(--text);
    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;
}

<!DOCTYPE html>
<html lang="en">
  <head>

  </head>

  <body>
    <!--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 id="delegar">Dark Mode</button>
    </div>
    <script>
        const button = document.getElementById('delegar');
        button.addEventListener('click', (event) => {
            if (button.innerHTML === "Dark Mode") {
                document.documentElement.style.setProperty('--text', '#eee');
                document.documentElement.style.setProperty('--bg', '#1e2939');
                button.innerHTML = "Light Mode";
            } else {
                document.documentElement.style.setProperty('--text', '#1e2939');
                document.documentElement.style.setProperty('--bg', '#F1F9fc');
                button.innerHTML = "Dark Mode";
            }
        });
    </script>
  </body>
</html>

如何切换许多 css 样式来制作黑暗模式？

How to toggle many css styles to make a dark mode?

html

javascript

css

darkmode