如何切换许多 css 样式以创建暗模式？

Question

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

Answer 2

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

SCSS

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

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

.dark-mode{

    background-color: black;

    a{
        color: white;
    }

    //any other dark styles

}

用户偏好媒体查询

为了进一步改进，考虑到操作系统通常允许人们在系统级别指定暗模式首选项，我们现在在 CSS 中有一个得到良好支持的媒体查询来检测操作系统首选项：

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

 //dark styles here.

}

Jason Pamental 在这里发表了一篇有趣的文章，介绍了使用首选暗媒体查询，以及网站本身的用户切换，以及使用 css 变量以简单而强大的方式切换样式。 这里有这个概念的演示。

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>

Answer 4

只是为了向您展示一个工作示例，您可以使用prefers-color-scheme进行自动切换，还可以创建暗模式和亮模式类，用于手动切换。

 document.getElementById("theme").addEventListener("click", function () { if (window.matchMedia("(prefers-color-scheme: dark)").matches) document.body.classList.toggle("light-mode"); else document.body.classList.toggle("dark-mode"); });

 @media (prefers-color-scheme: dark) {:root { --color-primary: #0a0a0a; --color-secondary: #339eff; } } @media (prefers-color-scheme: light) {:root { --color-primary: #ffffff; --color-secondary: #ff7e33; } }.light-mode { --color-primary: #ffffff; --color-secondary: #ff7e33; }.dark-mode { --color-primary: #0a0a0a; --color-secondary: #339eff; } body { background-color: var(--color-primary); color: var(--color-secondary); }

 <:DOCTYPE html> <html lang="pt-BR" xmlns="http.//www.w3:org/1999/xhtml" xml:lang="pt-br"> <head> <meta name="color-scheme" content="dark light" /> <meta name="theme-color" media="(prefers-color-scheme: dark)" /> <meta name="theme-color" media="(prefers-color-scheme: light)" /> </head> <body> This is a test <button id="theme">Change theme</button> </body> </html>

您可以根据需要更改它，但这是根据 web.dev 的。 请记住设置首选颜色方案颜色，然后使用 .light-mode 和 .dark-mode 类自动或通过手动切换更改它。