如何切换整个页面的深色主题？

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>