color-scheme — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 color-scheme: one property, native controls repaint</h1>
    <p class="pg-sub">
      The box below is a dark app UI — background already set, nothing else touched.
      Toggle <code>color-scheme</code> on it and watch the date field, dropdown,
      checkbox, and scrollbar switch their own native rendering to match.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Set color-scheme on the frame</div>
      <div class="btn-row" id="seg" role="group" aria-label="color-scheme value">
        <button class="btn sm primary" data-scheme="normal">Default (the bug)</button>
        <button class="btn sm" data-scheme="dark">dark</button>
        <button class="btn sm" data-scheme="light">light</button>
        <button class="btn sm" data-scheme="light dark">light dark (auto)</button>
      </div>
      <p class="os-note" id="osNote"></p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result — a dark app frame with native controls</div>
      <div class="frame" id="frame">
        <p class="frame-label">Your app · background already dark</p>
        <div class="controls-grid">
          <div class="field">
            <label for="dateInput">Date of birth</label>
            <input type="date" id="dateInput" value="1994-05-12" />
          </div>
          <div class="field">
            <label for="selectInput">Country</label>
            <select id="selectInput">
              <option>United States</option>
              <option>Canada</option>
              <option>Germany</option>
              <option>Japan</option>
            </select>
          </div>
          <div class="scrollbox" id="scrollbox">
            Scroll me — the track and thumb are native chrome too.<br />
            Line two.<br />Line three.<br />Line four.<br />Line five.<br />Line six.
          </div>
          <div class="check-row">
            <input type="checkbox" id="checkInput" checked />
            <label for="checkInput">Remember this device</label>
          </div>
        </div>
      </div>
      <div class="status" id="status" style="margin-top:14px">
        <span class="dot warn" id="dot"></span><span id="statusText">Default: the browser has no idea this page is dark, so it draws every control light.</span>
      </div>
      <p class="hint" id="hint">Open the date picker or the country dropdown after each click — the popup itself repaints too, not just the closed box.</p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.