<label>
  Color Scheme
  <select id="colorSchemeSelect">
    <option value="system">Use System Preference</option>
    <option value="dark" selected>Dark Mode</option>
    <option value="light">Light Mode</option>
  </select>
</label>

<div class="area" id="area">
  <label>
    Color Scheme (Scoped)
    <select id="colorSchemeSelectScoped">
      <option value="system">Use System Preference</option>
      <option value="dark">Dark Mode</option>
      <option value="light" selected>Light Mode</option>
    </select>
  </label>
</div>

html {
  color-scheme: dark;

  background: light-dark(white, black);
  color: light-dark(black, white);
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  grid-template-columns: 1fr 1fr;
  font: 100% system-ui;
}

.area {
  color-scheme: light;
  background: light-dark(white, black);
  color: light-dark(black, white);

  margin: 2rem;
  border: 1px solid gray;
  min-block-size: 10rem;
  display: grid;
  place-content: center;
  padding: 2rem;
  border-radius: 4px;
}

colorSchemeSelect.addEventListener("change", (e) => {
  switch (e.target.value) {
    case "system":
      document.documentElement.style.colorScheme = "light dark";
      break;
    case "light":
      document.documentElement.style.colorScheme = "light";
      break;
    case "dark":
      document.documentElement.style.colorScheme = "dark";
      break;
  }
});

colorSchemeSelectScoped.addEventListener("change", (e) => {
  switch (e.target.value) {
    case "system":
      area.style.colorScheme = "light dark";
      break;
    case "light":
      area.style.colorScheme = "light";
      break;
    case "dark":
      area.style.colorScheme = "dark";
      break;
  }
});