Minimal JS Implementation Of The Dark Mode On The Webpage

Preview:

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

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>