<button type="button" class="toggle-theme"></button>
    <h1>Heading1</h1>
    <h2>Heading2</h2>
    <h3>Heading3</h3>
    <h4>Heading4</h4>
    <h5>Heading5</h5>
    <h6>Heading6</h6>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus sint quas
      doloribus? Quod quam, sapiente necessitatibus commodi, ab culpa
      exercitationem alias iste eius eaque ipsum facere, maxime cupiditate?
      Sapiente, est.
    </p>
    <div>
      <label>Text</label>
      <input type="text" />
    </div>
    <div>
      <label>Number</label>
      <input type="number" />
    </div>
    <div>
      <label>Range</label>
      <input type="range" />
    </div>
    <div>
      <button type="button">Button</button>
    </div>
    <div>
      <select>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div>
      <label><input type="checkbox" />Checkbox</label>
    </div>
    <div>
      <input type="radio" name="foo" value="odd" />
      <label>Odd</label>
      <input type="radio" name="foo" value="even" />
      <label>Even</label>
    </div>
    <code>
      <pre>
    function doSomething(){
        console.log("hello world")
    }
    </pre
      >
    </code>
.dark {
  --background-color: #333;
  --font-color: #f1f1f1;
  --primary-color: #ffbdbd;
}
.light {
  --background-color: #f1f1f1;
  --font-color: #111;
  --primary-color: #ffbdbd;
}

body {
  background: var(--background-color);
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
input,
select,
pre,
code,
label {
  color: var(--font-color);
}
button,
input,
select {
  background-color: var(--background-color);
}
button {
  background-color: var(--primary-color);
}
.toggle-theme {
  position: absolute;
  width:30px;
  height:30px;
  right:10px;
  top:10px;
  background-color: transparent;
  border: 0;
  font-size: 1.2em;
}
.dark .toggle-theme::after {
  content: "☀";
  color: #f1f1f1;
}
.light .toggle-theme::after {
  content: "☽";
  color: #000;
}

/* Optional */

body {
  font-family: Montserrat;
}
div {
  margin-top: 30px;
}

 const defaultMode = "dark"; // if prefer scheme is not available
    const body = document.querySelector("body");

    const mode = checkSavedMode() ? checkSavedMode() : detectColorMode();
    setColorMode(mode);
    const toggle = document.querySelector(".toggle-theme");
    toggle.addEventListener("click", toggleClass);

    function checkSavedMode() {
      return localStorage.getItem("color-mode");
    }
    function saveColorMode(value) {
      localStorage.setItem("color-mode", value);
    }

    function detectColorMode() {
      if (
        window.matchMedia &&
        window.matchMedia("(prefers-color-scheme: dark)").matches
      ) {
        return "dark";
      } else if (window.matchMedia) {
        return "light";
      }
      return defaultMode;
    }

    function setColorMode(mode) {
      body.classList.add(mode);
    }

    function toggleClass() {
      body.classList.toggle("dark");
      body.classList.toggle("light");
      body.classList.contains("dark")
        ? saveColorMode("dark")
        : saveColorMode("light");
    }

External CSS

  1. https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;1,200&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.