Как заставить другие классы менять свой цвет при включенном темном режиме?

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;
}

Так что класс customBackground будет отображаться по-разному в зависимости от того, есть ли предок .dark.

Другой способ сделать это, если вы dark включает и выключает

H1.dark.customBackground {
  background:white;
}