<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"> 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));
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.