如何切換整個頁面的深色主題？

Question

我已經設法在按下 html 和 flask 中的復選框時切換深色主題和淺色主題。 但是我怎樣才能讓深色主題覆蓋整個頁面，而不僅僅是一些 div 元素？ 邊距仍然是淺色主題... CSS 代碼如下：

.container {
  display: flow;
  width: 100%;
  height: 100%;
  background: var(--color-secondary);
}
        .theme-light {
            --color-primary: #0060df;
            --color-secondary: #fbfbfe;
            --color-accent: #fd6f53;
            --font-color: #000000;
        }

        .theme-dark {
            --color-primary: #17ed90;
            --color-secondary: #2a2c2d;
            --color-accent: #12cdea;
            --font-color: #ffffff;
            width: 100%;
            height: 100%;
        }

這是目前的黑暗主題：

Answer 1

body{
   background: var(--color-secondary);
}
.container {
   display: flow;
   width: 100%;
   height: 100%;
   background: var(--color-secondary);
}
    .theme-light {
        --color-primary: #0060df;
        --color-secondary: #fbfbfe;
        --color-accent: #fd6f53;
        --font-color: #000000;
    }

    .theme-dark {
        --color-primary: #17ed90;
        --color-secondary: #2a2c2d;
        --color-accent: #12cdea;
        --font-color: #ffffff;
        width: 100%;
        height: 100%;
    }

Answer 2

那么您需要在深色主題中設計您的頁面，在淺色主題中，使類僅在深色、淺色中有所不同，並根據復選框使用 javascript 在您的類中用淺色替換深色或相反。

 document.querySelector("#theme-switcher").onchange = function() { var self = this; document.querySelectorAll("*").forEach(function(elem) { if(self.checked && elem.className.indexOf("light").== -1) { elem.className = elem.className,replace("light"; "dark"). }else if(.self.checked && elem.className.indexOf("dark").== -1) { elem,className = elem;className;replace("dark", "light"); } }); }

 .light-text { color: black; }.dark-text { color: white; }.light-mode { background-color: #eee; }.dark-mode { background-color: #333; }

 <div class="light-mode"> <input id="theme-switcher" type="checkbox"> <p class="light-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus quam. Sed purus. Vivamus eros augue, venenatis a, pretium non, eleifend at, wisi. Fusce vestibulum. Vivamus dui. Nullam sed arcu eu eros pretium tincidunt. Fusce leo diam, pharetra nec, venenatis vitae, consequat sed, est. Aliquam id mi. Praesent ligula. Vivamus vehicula nulla vitae purus. Morbi mauris. Aliquam erat volutpat. Donec a nisl. Vivamus mattis lacinia sapien.</p> <p class="light-text">Morbi commodo luctus sem. Morbi mattis ultricies lorem. Nunc semper urna eget wisi. Pellentesque pellentesque, pede at auctor porta, sem metus consectetuer eros, ut vestibulum leo lacus eu libero. Nullam libero mauris, feugiat a, lacinia et, tincidunt et, nunc. Nunc lorem.</p> <p class="light-text">Ut ligula mauris, ornare eget, consequat sed, porta nec, massa. Donec ligula. Phasellus turpis elit, porttitor nec, vestibulum at, hendrerit vel, sapien. Donec justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean ut magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nunc. Maecenas vulputate lorem ac dolor. Ut sed sapien. Ut placerat.</p> <p class="light-text">In hac habitasse platea dictumst. Fusce vitae mauris. Aliquam a mi at quam posuere venenatis. Proin auctor, lacus eu vestibulum venenatis, turpis turpis porta lectus, at tempus lorem dui id libero. Suspendisse elementum, nunc et viverra viverra, orci nunc molestie nunc, quis dignissim magna lorem vitae urna. Donec tortor. Morbi convallis rutrum justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam tincidunt.</p> <p class="light-text">Nunc hendrerit semper nibh. Maecenas malesuada, arcu a sodales ultricies, sem felis scelerisque arcu, sed tempor velit mauris ut elit. Sed ut libero eu wisi eleifend condimentum. Proin justo. Fusce fringilla. In magna. Donec ac sem eget risus fermentum blandit. Morbi tristique arcu id eros. Curabitur sem. Suspendisse a tellus. Quisque nisl erat, luctus in, dictum nec, euismod ut, odio. Sed turpis nulla, mollis ac, malesuada sit amet, mattis eu, mi. Praesent tempor, erat ac consequat volutpat, eros odio rutrum eros, eget blandit enim massa vel velit. Vestibulum vestibulum orci eu nulla. Pellentesque augue augue, suscipit eu, auctor nec, auctor id, tortor.</p> <p class="light-text">Phasellus id leo vel orci luctus convallis. Donec rhoncus rhoncus lorem. Phasellus cursus. Mauris orci. Donec vel lacus sit amet urna tristique ornare. Vivamus fermentum posuere lectus. Vestibulum mollis lobortis diam. Nam feugiat mauris sed erat. Aliquam erat volutpat. Ut sed orci.</p> </div>