<p>
  <label for="mode-switcher">Mode:</label>
  <select id="mode-switcher">
    <option value="auto">Auto</option>
    <option value="light">Light</option>
    <option value="dark">Dark</option>
  </select>
</p>

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;
}

p {
  width: max-content;
  margin: 3rem auto;
  font-size: 200%;
}
select {
  font-size: inherit;
}