Minimal JS Implementation Of The Dark Mode On The Webpage

Category: Javascript | July 17, 2019
Author: rohanharikr
Views Total: 79
Official Page: Go to website
Last Update: July 17, 2019
License: Apache-2.0

Preview:

Minimal JS Implementation Of The Dark Mode On The Webpage

Description:

This is the simplest JavaScript implementation of the dark mode that uses classList to toggle between dark theme and light theme on the webpage.

How to use it:

Create the dark theme in the CSS.

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

The main function to toggle the dark mode.

function darkxlight() {
   var element = document.getElementById("darkxlight");
   element.classList.toggle("dark");
}

Add the darkxlight ID to the body tag.

<body id="darkxlight">
  ...
</body>

Bind the function to the toggle button. That’s it.

<button onclick="darkxlight()">🌓 Dark/Light</button>

You Might Be Interested In:


Leave a Reply