Hello!<br />
This is an example for theme toggler.<br />

It still works with inputs and other native elements: <input type="date"> <br />

<span id="mode">LOADING (amplified for the demo)</span> <button id="theme-toggle">Change mode</button><br /><br />

Pick the "dark" theme and then press rerun.

:root[data-applied-mode="light"] {
  color-scheme: light;
  --text: black;
  --background: white;
}
:root[data-applied-mode="dark"] {
  color-scheme: dark;
  --text: white;
  --background: black;
}

body {
  color: var(--text);
  background: var(--background);
}

function getUserPreference() {
  return localStorage.getItem("theme") || "system";
}
function saveUserPreference(userPreference) {
  localStorage.setItem("theme", userPreference);
}

function getAppliedMode(userPreference) {
  if (userPreference === "light") {
    return "light";
  }
  if (userPreference === "dark") {
    return "dark";
  }
  // system
  if (matchMedia("(prefers-color-scheme: light)").matches) {
    return "light";
  }
  return "dark";
}

function setAppliedMode(mode) {
  document.documentElement.dataset.appliedMode = mode;
}

function rotatePreferences(userPreference) {
  if (userPreference === "system") {
    return "light";
  }
  if (userPreference === "light") {
    return "dark";
  }
  if (userPreference === "dark") {
    return "system";
  }
  // for invalid values, just in case
  return "system";
}

const themeDisplay = document.getElementById("mode");
const themeToggler = document.getElementById("theme-toggle");

// Mimic heavy load done by other JS scripts
setTimeout(() => {
  let userPreference = getUserPreference();
  setAppliedMode(getAppliedMode(userPreference));
  themeDisplay.innerText = userPreference;

  themeToggler.onclick = () => {
    const newUserPref = rotatePreferences(userPreference);
    userPreference = newUserPref;
    saveUserPreference(newUserPref);
    themeDisplay.innerText = newUserPref;
    setAppliedMode(getAppliedMode(newUserPref));
  };
}, 1000);