(Темный режим) Как заставить фон измениться после добавления «темной темы»?

Question

поэтому у меня на сайте есть кнопка, которая должна переключать темный режим. В ходе проверки я вижу, что переключатель работает, но по какой-то причине тема #content .dark не видна. Я думал, что ребенок имеет приоритет.

HTML

<!-- Main Content -->
  <div id="content">

CSS

    #content {
    background: rgb(248, 201, 201);
    color: black;
}

#content .dark-theme {
    background: rgb(49, 51, 71);
    color: white;
}

JS

document.getElementById('change-theme-btn').addEventListener('click', function () {
content.classList.toggle('dark-theme');

});

Answer 1

Изменение:

#content .dark-theme {
    background: rgb(49, 51, 71);
    color: white;
}

на

#content.dark-theme {
    background: rgb(49, 51, 71);
    color: white;
}

Причина: Наличие пробела означает: Предмет с классом 'dark-theme', который является ДЕТЯМ предмета с Id«содержание».Без пробела он становится «Элементом с идентификатором содержимого и классом dark-theme».

Answer 2

Вы должны использовать #content.dark-theme, чтобы правильно выбрать нужный элемент;здесь вы можете увидеть это в действии.

В CSS, когда вы пишете: #content .dark-theme, вы пытаетесь настроить таргетинг на элемент с классом dark-theme, который является потомком элемента с идентификатором content,

В вашем случае вы хотите нацелиться на элемент #content;поэтому вы должны написать: #content.dark-theme или просто #content;этим вы нацеливаетесь на элемент #content, который ТАКЖЕ имеет класс dark-theme

document.getElementById('change-theme-btn').onclick = function() {
  content.classList.toggle('dark-theme');
}

#content {
  background: rgb(248, 201, 201);
  color: black;
  height: 150px;
}

#content.dark-theme {
  background: rgb(49, 51, 71);
  color: white;
}

<div id="content">
  This is content
</div>
<button id="change-theme-btn">Change</button>

Answer 3

Удалите #content перед .dark-theme в вашей css.