accent-color — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 accent-color: one hue, four controls</h1>
    <p class="pg-sub">
      Pick a color. Watch which native form controls pick it up automatically via
      <code>accent-color</code> — and which one (<code>&lt;meter&gt;</code>) never does, plus what happens the moment a control has already been rebuilt with <code>appearance: none</code>.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="row">
        <input type="color" id="colorInput" value="#6366f1" aria-label="Pick accent color" />
        <div class="swatches" id="swatches">
          <button class="swatch" style="background:#6366f1" data-color="#6366f1" aria-label="Indigo"></button>
          <button class="swatch" style="background:#16a34a" data-color="#16a34a" aria-label="Green"></button>
          <button class="swatch" style="background:#e11d48" data-color="#e11d48" aria-label="Rose"></button>
          <button class="swatch" style="background:#f59e0b" data-color="#f59e0b" aria-label="Amber"></button>
        </div>
      </div>
      <div class="row" style="margin-top:14px">
        <label class="toggle">
          <input type="checkbox" id="rebuiltToggle" /><span class="switch"></span>
          <span>Simulate a checkbox already rebuilt with <code>appearance: none</code></span>
        </label>
      </div>
      <p class="hint" id="hint">
        Move the color picker — every control below updates through one shared <code>accent-color</code> declaration, no per-control CSS.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div id="stage">
        <div class="row">
          <span class="control-name">checkbox</span>
          <input type="checkbox" id="cb1" checked />
          <input type="checkbox" id="cb2" />
          <span class="control-name" style="min-width:auto">indeterminate</span>
          <input type="checkbox" id="cb3" />
        </div>
        <div class="row">
          <span class="control-name">radio</span>
          <label><input type="radio" name="r" checked /> A</label>
          <label><input type="radio" name="r" /> B</label>
        </div>
        <div class="row">
          <span class="control-name">range</span>
          <input type="range" id="rng" value="60" />
        </div>
        <div class="row">
          <span class="control-name">progress</span>
          <progress id="prog" value="0.6" max="1"></progress>
        </div>
        <div class="row">
          <span class="control-name">meter <em>(unaffected)</em></span>
          <meter value="0.6" min="0" max="1"></meter>
        </div>
        <div class="row" id="manualRow" hidden>
          <span class="control-name">appearance:none</span>
          <input type="checkbox" id="manualBox" checked />
        </div>
      </div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot good" id="dot"></span><span id="statusText">accent-color: #6366f1 — checkbox, radio, range, and progress all tinted. meter never does.</span>
      </div>
    </div>
  </div>

preview

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