我創建了一個設計復雜且背景顏色不同的頁面，我決定添加一個按鈕讓用戶在明暗模式之間切換
我用 JS 嘗試了不同的解決方案，但沒有成功。我使用的當前解決方法是在我的 CSS 檔案中添加兩個媒體。基本上，如果我的網站外觀設定為深色，則頁面還將加載深色風格的主題，并為瀏覽器淺色外觀加載 Light。
@media screen and (prefers-color-scheme: dark)
@media screen and (prefers-color-scheme: light)
問題是：我怎樣才能讓用戶通過使用 vanilla Javascript 的按鈕手動在暗光配色方案之間手動切換？（不帶復選框） Ps 也許我可以用 CSS 中的 var(--rule) 以某種方式實作這一點，但我對這些東西還是新手，我的 JS 知識幾乎為零
例如：
@media screen and (prefers-color-scheme: dark) {
p, h2 {
color: #e7e7e7;
}
@media screen and (prefers-color-scheme: light) {
p, h2 {
color: #333333;
}
html 按鈕（我的類/按鈕是占位符）
<div class="dark-mode-container">
<div id="dark-mode-btn">
<button class="theme-switch">test</button>
<i class="fa-solid fa-moon" title="Switch to Dark mode"></i>
</div>
這是我在粘性導航中的按鈕，我打算用它來切換模式
uj5u.com熱心網友回復：
我會說使用javascript，創建一個按鈕和一個javascript函式onclick。
document.body.classList.toggle("dark-mode");
此函式在 body 上切換類暗模式，因此對于暗模式樣式，在所有 CSS 選擇器的前面添加 body.dark-mode。
uj5u.com熱心網友回復：
const btn = document.getElementById('btn');
btn.addEventListener('click', function () {
var elmWitchChange = document.getElementsByClassName('light')
for (var i = 0; i < elmWitchChange.length; i ) {
elmWitchChange[i].classList.toggle('dark')
}
}) .dark {
background-color: black;
color: white;
} <header class="light">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, dolor?
</header>
<br>
<div class="light">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus facilis qui magnam quidem facere autem maiores
necessitatibus, hic maxime eum.
</div>
<br>
<span class="light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, recusandae?</span>
<br>
<div>
this div does not have a light class therefore it won't be effected
</div>
<br>
<button class="light" id="btn">toggle</button>uj5u.com熱心網友回復：
檢查這個我希望這會有所幫助
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/506394.html
標籤：javascript html css 配色方案
上一篇：如何通過某些道具對物件陣列進行分組并保留原始物件屬性
下一篇：動態類系結在Vue中不起作用