<button class="btn-toggle">Toggle Dark-Mode</button>
<h1>Hey there! This is just a title</h2>
  <p>I am just a boring text, existing here solely for the purpose of this demo</p>
  <p>And I am just another one like the one above me, because two is better than having only one</p>
body {
  --text-color: #222;
  --bkg-color: #fff;
body.dark-theme {
  --text-color: #eee;
  --bkg-color: #121212;

* {
  font-family: Arial, Helvetica, sans-serif;

body {
  background: var(--bkg-color);

p {
  color: var(--text-color);
const btn = document.querySelector(".btn-toggle");

const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {

btn.addEventListener("click", function () {

  let theme = "light";
  if (document.body.classList.contains("dark-theme")) {
    theme = "dark";
  localStorage.setItem("theme", theme);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.