<fieldset id="mode-switcher">
<legend>Select a color mode:</legend>
<div>
<input type="radio" id="auto" name="mode" value="auto" checked />
<label for="auto">Auto</label>
</div>
<div>
<input type="radio" id="light" name="mode" value="light" />
<label for="light">Light</label>
</div>
<div>
<input type="radio" id="dark" name="mode" value="dark" />
<label for="dark">Dark</label>
</div>
</fieldset>
html {
color-scheme: light dark;
background-color: light-dark(lavender, rebeccapurple)
}
html:has(#mode-switcher [value="light"]:checked){
color-scheme: light;
}
html:has(#mode-switcher [value="dark"]:checked){
color-scheme: dark;
}
fieldset {
width: max-content;
margin: 3rem auto;
font-size: 200%;
}
input {
height: 1.5em;
width: 1.5em;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.