（暗模式）添加“暗主题”后，如何更改背景？

Question

so I have a button on my website that is supposed to toggle dark mode. I see in my inspection that the toggle is working but for some reason, the #content .dark-theme isn't being seen. I thought that the child took precedence.

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

在你的css中删除.dark-theme之前的#content。

Answer 2

Change:

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

to

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

Reason: Having the space, means: An item with class 'dark-theme' which is a CHILDREN of an item with Id "content". Without the space, it becomes "An item which has Id content AND class dark-theme".

Answer 3

You should use #content.dark-theme to correctly target the element you need; here you can see this in action.

In CSS, when you write: #content .dark-theme you are trying to target the element with a class dark-theme that is a child of an element with an id content .

In your case, what you want to target is the element #content itself; so you should write: #content.dark-theme or just #content ; with this you are targeting the element #content that ALSO has a class 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>