CSS3 Color-scheme

<!DOCTYPE html>
<title>Example</title>
<style>
.demo-container {
  display: flex;
  gap: 20px;
  font-family: sans-serif;
  flex-wrap: wrap;
}
.scheme-box {
  flex: 1;
  min-width: 240px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid ##ccc;
}
.light-box {
  color-scheme: light;
  background-color: Canvas;
  color: CanvasText;
}
.dark-box {
  color-scheme: dark;
  background-color: Canvas;
  color: CanvasText;
}
.controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
</style>

<div class="demo-container">
  <div class="scheme-box light-box">
    <h3>color-scheme: light</h3>
    <div class="controls">
      <input type="text" value="Text input">
      <select>
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
      <label><input type="checkbox" checked> Checkbox</label>
      <button type="button">Button</button>
    </div>
  </div>

<div class="scheme-box dark-box">
    <h3>color-scheme: dark</h3>
    <div class="controls">
      <input type="text" value="Text input">
      <select>
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
      <label><input type="checkbox" checked> Checkbox</label>
      <button type="button">Button</button>
    </div>
  </div>
</div>