Javascript 当黑暗模式打开时，如何使其他类更改其颜色？

我在我的网站上实现了一个黑暗模式，但它只会改变身体的颜色和身体里的东西。它不适用于其他元素。例如，当我希望更改导航栏背景和文本时，它将保持相同的颜色。基本上，我想让它，使黑暗模式的风格改变了页面上的一切。我认为它没有改变的原因是导航栏有它自己的样式类，所以当我用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()
} 
})

.黑暗{
背景色：rgba（4,25,55,1）；
颜色：白色；
}
让checkbox=document.getElementById（“暗码”）；
让body=document.getElementById（'body'））
设darkMode=localStorage.getItem（'darkMode'）
函数setTheme（）{
body.classList.add（'dark'）
setItem（'darkMode'，'on'）}
功能去除血红素（）{
body.classList.remove（'dark'）
setItem（'darkMode'，null）
}
如果（暗模式==='on'）{
setTheme（）
checkbox.checked=true；
}
复选框.addEventListener（'单击'，（）=>{
darkMode=localStorage.getItem（'darkMode'）
如果（暗模式！=='on'）{
setTheme（）
}否则{
脱血红素（）
} 
})

您可以这样做

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

因此customBackground类根据是否存在.dark祖先进行不同的渲染

另一种方法是打开和关闭

dark

H1.dark.customBackground {
  background:white;
}

---

在元素上设置类时，它仅在该元素上（代码中的主体）；如果其他元素有一些css规则来设置特定的背景颜色，那么您也必须处理它们，通过在MU上应用深色模式规则，您可以学习css变量并使用主题化的概念。我建议使用css而不是javascript。修改和使用javascript将非常困难