<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);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.