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

Question

所以我的網站上有一個按鈕，可以切換黑暗模式。 我在檢查中看到切換正在工作，但由於某種原因，＃content .dark-theme沒有被看到。 我以為孩子優先。

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

更改：

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

至

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

原因：擁有空格，意味着：具有“暗主題”類的項目，該項目是具有Id“內容”的項目的兒童。 沒有空間，它將變為“具有ID內容且類別為深色主題的項目”。

Answer 3

您應該使用#content.dark-theme來正確定位您需要的元素; 在這里你可以看到這個在行動。

在CSS中，當您編寫： #content .dark-theme您試圖使用類dark-theme來定位元素，該類是具有id content的元素的子元素。

在你的情況下，你想要的目標是元素#content本身; 所以你應該寫： #content.dark-theme或者#content ; 有了這個，你的目標是那個ALSO有一個類dark-theme的元素#content

 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>