Comment activer le thème sombre pour toute la page ?

Question

J'ai réussi à faire basculer le thème sombre et le thème clair en appuyant sur une case à cocher en html et en flask. Mais comment puis-je faire en sorte que le thème sombre couvre toute la page, et pas seulement certains éléments div ? Les marges sont toujours en thème clair... Code CSS ci-dessous :

.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%;
        }

C'est le thème sombre actuel :

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

Vous devez concevoir votre page dans le thème sombre, et dans le thème clair, faire en sorte que les classes soient différentes en sombre et en clair et utiliser le javascript pour remplacer le sombre par le clair dans vos classes ou l'inverse selon la case à cocher.

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>