JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <head>

  </head>

  <body>
    <p>
      Here is some irrelevant text
    </p>
    <button>
  Here is an irrelivant button
  </button>
    <footer id="bottomText">
      <span>here is my footer</span>
      <span>why is it not on the bottom</span>
      <span><u id="darkMode" onclick="darkMode()">Dark mode</u></span>
    </footer>
  </body>

</html>

CSS

body {
  position: relative;
  background-color: white;
  margin: 100px;
  filter: invert(0%);
}

body.darkMode {
  position: relative;
  margin: 100px;
  background-color: #222;
  filter: invert(100%);
}

footer {
  /*Do the font (maybe)*/
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

footer.darkMode {
  /*Do the font (maybe)*/
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

JavaScript

var darkModeOn = false;

function darkMode() {
  var element = document.body;
  var footer = document.getElementById("bottomText");

  if (darkModeOn == false) {
    document.getElementById("darkMode").innerHTML = "Light mode";
    darkModeOn = true;
  } else {
    document.getElementById("darkMode").innerHTML = "Dark mode";
    darkModeOn = false;
  }

  element.classList.toggle("darkMode");
  footer.classList.toggle("darkMode");
}