JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="debug.css">

  </head>

  <body id="bodyElem" class="my-body light-mode">

      <h1>Settings</h1>
      <p>Dark mode:</p>

      <button type="button" onclick="invertMode()">click</button>

  </body>

</html>

CSS

.my-body.light-mode{
  background-color: yellow;
}

.my-body.dark-mode{
  background-color: black;
}

JavaScript

function invertMode() {
  var elements = document.getElementsByClassName("my-body");
  for(var i=0; i<elements.length; i++){
  	if(elements[i].className.indexOf("dark-mode") >= 0)
    {
      elements[i].classList.remove("dark-mode");
      elements[i].classList.add("light-mode");
    }
    else if(elements[i].className.indexOf("light-mode") >= 0){
      elements[i].classList.remove("light-mode");
      elements[i].classList.add("dark-mode");
    }
  }
}