How to switch to dark mode

use CSS and JavaScript to switch between dark and light modes.

try it yourself

toggle class

Step 1 - Add HTML:

use any element that should store the content you want to switch designs. In our example, for simplicity, we will use <body>:

<body>

Step 2 - Add CSS:

set <body> style the element and create a toggle for .dark-mode class:

body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
{}
.dark-mode {
  background-color: black;
  color: white;
{}

Step 3 - Add JavaScript:

obtain <body> element and .dark-mode switch between classes:

function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode");
{}

try it yourself

page-related

Tutoriel :Comment ajouter une classe

Manuel de référence :Attribut classList de l'élément DOM HTML