<body style="color-scheme: light dark">
  <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>
  <label for="hueSlider">&nbsp; Hue:</label> 
  <input id="hueSlider" type="range" min="0" max="360" value="222">
  
  <div>Theme color,
<br><div class="oklch"></div> in OKLCH color space 
<br><div class="hsl"></div> in HSL color space</div>
  <p class="oklch">Here's some themed text in a themed box :) (OKLCH)</p>
  <p class="hsl">Here's some themed text in a themed box :) (HSL)</p>

</body>
body {
  color: CanvasText;
  background-color: Canvas;
  padding: 1rem;
  
  --theme-oklch: oklch(50% 0.25 var(--hue, 222));
  --theme-hsl: hsl(var(--hue, 222) 75% 50%);
}

body > div {
  margin-block: 1rem 0;
}
div > div {
  display: inline-block;
  width: 2rem;
  height: 1rem;
  border: 1px solid;
}
div.oklch {
  background-color: var(--theme-oklch);
}
div.hsl {
  background-color: var(--theme-hsl);
}

p {
  padding: 1rem;
} 
p.oklch {
  color: color-mix(in oklab, CanvasText 75%, var(--theme-oklch));
  background-color: color-mix(in oklab, Canvas 75%, var(--theme-oklch));
}
p.hsl {
  color: color-mix(in oklab, CanvasText 75%, var(--theme-hsl));
  background-color: color-mix(in oklab, Canvas 75%, var(--theme-hsl));
}
const body = document.querySelector('body');
const hueSlider = document.querySelector('#hueSlider');

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

hueSlider.addEventListener("input", () =>
 body.style.setProperty("--hue", hueSlider.value));
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.