How To Toggle Between Dark and Light Mode

Switch between dark and light mode with CSS and JavaScript

Toggle Class

Step 1) Add HTML:

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>

Step 2) Add CSS:

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

Step 3) Add JavaScript:

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.

Email:

Content: