How TO - Toggle Dark Mode

Switch between dark and light mode with CSS and JavaScript.

Toggle Class

Use any element that should store the content you want to toggle the design for. In our example, we will use <body> for the sake of simplicity:

<body>

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

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

.dark-mode {
background-color: black;
color: white;
}

Get the <body> element and toggle between the .dark-mode class:

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

Tip: Also see How To Add A Class.

Tip: Learn more about the classList property in our JavaScript Reference.