Question

我在我的网站上实施了暗模式，但它只会改变身体的颜色和体内的东西。它不适用于其他元素。例如，当我希望更改时，导航栏的背景和文本保持相同的颜色。基本上，我想这样做，以便深色模式样式可以更改页面上的所有内容。我认为它没有改变的原因是因为导航栏具有它自己的样式类，因此当我使用javascript添加该类时，它不会覆盖它。我不确定这是为什么。这就是我所拥有的。我试图查看是否可以切换课程，但还是一样。

   <div class= 'nav-bar'>
    <div class="logo"><a href="#home">SS</a> </div>
    <div class="nav-links">
    <ul>
         <li><a href='home.html'>Home</a></li> 
         <li><a href='about.html'>About</a></li>
         <li><a href='random.html'>Random</a></li>
         <label class="switch">
            <input type="checkbox" id="darkmode">
            <span class="slider round"></span>
          </label>
     </ul>


.dark {
 background-color: rgba(4, 25, 55    , 1);
 color: white;
 }



let checkbox = document.getElementById("darkmode");
let body = document.getElementById('body')
let darkMode = localStorage.getItem('darkMode')

function setTheme() {
body.classList.add('dark')
    localStorage.setItem('darkMode','on')}

function removeTheme(){
body.classList.remove('dark')
localStorage.setItem('darkMode', null)
}

if(darkMode === 'on') {
setTheme()
checkbox.checked = true;

}

checkbox.addEventListener('click', () => {
darkMode = localStorage.getItem('darkMode')
if (darkMode !== 'on') {
    setTheme()
} else {
    removeTheme()
} 
})

Answer 1

您可以做这样的事情

.customBackground {
  background: black;
}
.dark .customBackground {
  background: white;
}

因此，根据是否有.dark祖先，customBackground类的呈现方式会有所不同。

如果要打开和关闭dark，另一种方法是

H1.dark.customBackground {
  background:white;
}

启用黑暗模式时，如何使其他班级更改其颜色？

1 个答案: