如何切換許多 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 類自動或通過手動切換更改它。