<p>
<button id="autoSwitch" type="button" onclick="switchAuto()">Auto</button>
<button id="lightSwitch" type="button" onclick="switchLight()">Light</button>
<button id="darkSwitch" type="button" onclick="switchDark()">Dark</button>
</p>
<fieldset>
<legend>Select a color mode:</legend>
<div>
<input onchange="switchAuto()" type="radio" id="auto" name="mode" value="auto" checked />
<label for="auto">Auto</label>
</div>
<div>
<input onchange="switchLight()" type="radio" id="light" name="mode" value="light" />
<label for="light">Light</label>
</div>
<div>
<input onchange="switchDark()" type="radio" id="dark" name="mode" value="dark" />
<label for="dark">Dark</label>
</div>
</fieldset>
<p>
<label for="lightdark">Mode:</label>
<select onchange="switchMode(this.value)" id="lightdark">
<option value="auto">Auto</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</p>
html {
color-scheme: light dark;
}
p, fieldset {
width: max-content;
margin: 2rem auto;
}
const html = document.querySelector('html');
// three functions used by buttons and radios
function switchAuto() {
html.style.setProperty("color-scheme", "light dark");
}
function switchLight() {
html.style.setProperty("color-scheme", "light");
}
function switchDark() {
html.style.setProperty("color-scheme", "dark");
}
// single function used by select element
function switchMode(mode) {
html.style.setProperty("color-scheme", mode === "auto" ? "light dark" : mode);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.