<button id="lightSwitch" type="button" onclick="switchLight()">Light</button>
  <button id="darkSwitch" type="button" onclick="switchDark()">Dark</button>
  <button id="autoSwitch" type="button" onclick="switchAuto()">Auto</button>

<h1>The color scheme is </h1>

<div>
  My color scheme is always dark.
</div>

<h2>Or choose vastly different schemes for light and dark modes!</h2>

<p><b>Look at it gooo!</b></p>

<hr>
(with thanks to <a href=" https://www.matuzo.at/blog/2024/100daysof-day107" target="_blank">Manuel Matuzovic</a> for the codepen I forked this from)

html {
  --black: oklch(0% 0 0);
  --white: oklch(100% 0 0);
  
  color-scheme: light dark;
  
  --background: light-dark(var(--white), var(--black));
  --text: light-dark(var(--black), var(--white));
}
  
body {
  background-color: var(--background);
  color: var(--text);
}

div {
  color-scheme: dark;
  background-color: var(--background);
  color: var(--text);
}

p {
  color: light-dark(DarkGreen, Lavender);
  background-color: light-dark(Pink, SaddleBrown);
  
  padding: 1em;
}









h1 {
  --scheme: "light";
}

h1::after {
  content: var(--scheme);
}

@media (prefers-color-scheme: dark) {
  h1 {
    --scheme: "dark";
  }
}

const html = document.querySelector('html');

function switchDark() {
  html.style.setProperty("color-scheme", "dark");
}
function switchLight() {
  html.style.setProperty("color-scheme", "light");
}
function switchAuto() {
  html.style.setProperty("color-scheme", "light dark");
}