Minimal JS Implementation Of The Dark Mode On The Webpage

Authorrohanharikr

Last UpdateJuly 17, 2019

LicenseApache-2.0

Tags

Views318 views

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>