prefers-color-scheme theme flash — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 The theme-flash simulator</h1>
    <p class="pg-sub">
      Pick an OS preference, a saved override, and <em>where the override script lives</em> —
      then hit reload and watch whether <code>prefers-color-scheme</code> actually causes the flash,
      or whether your script's timing does.
    </p>

<div class="field">
        <div class="ctl-label">OS preference (what <code>prefers-color-scheme</code> reports)</div>
        <div class="seg" id="osSeg" role="group" aria-label="OS preference">
          <button type="button" aria-pressed="true" data-val="light">☀️ Light</button>
          <button type="button" aria-pressed="false" data-val="dark">🌙 Dark</button>
        </div>
      </div>

<div class="field" style="margin-top:14px">
        <div class="ctl-label">Saved preference (your toggle wrote this to localStorage)</div>
        <div class="seg" id="savedSeg" role="group" aria-label="Saved preference">
          <button type="button" aria-pressed="true" data-val="none">— None (use OS)</button>
          <button type="button" aria-pressed="false" data-val="light">☀️ Light</button>
          <button type="button" aria-pressed="false" data-val="dark">🌙 Dark</button>
        </div>
      </div>

<div class="field" style="margin-top:14px">
        <div class="ctl-label">Where the override script lives</div>
        <div class="seg" id="placementSeg" role="group" aria-label="Script placement">
          <button type="button" aria-pressed="true" data-val="head">Inline, top of &lt;head&gt;</button>
          <button type="button" aria-pressed="false" data-val="body">Bottom of &lt;body&gt;</button>
          <button type="button" aria-pressed="false" data-val="effect">React <code>useEffect</code></button>
        </div>
      </div>

<div class="presets" style="margin-top:16px">
        <button class="btn sm" data-preset="bug">Preset: the common bug</button>
        <button class="btn sm" data-preset="fix">Preset: the fix</button>
        <button class="btn sm" data-preset="pure">Preset: pure CSS, no toggle</button>
      </div>

<div class="btn-row" style="margin-top:16px">
        <button class="btn primary" id="run">🔄 Reload the page</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What the reader sees</div>

<div class="browser" id="browser" data-theme="light">
        <div class="browser-bar">
          <span class="browser-dot"></span><span class="browser-dot"></span><span class="browser-dot"></span>
          <span class="browser-url">your-app.com</span>
        </div>
        <div class="browser-body">
          <div class="browser-headline" id="headline">Welcome back</div>
          <div class="browser-sub" id="subline">waiting for reload…</div>
          <span class="flash-badge" id="badge" style="display:none"></span>
        </div>
      </div>

<div class="status" id="statusRow" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — set up the page, then reload it.</span>
      </div>

<p class="hint" id="hint">
        The browser paints once, immediately, in whatever theme your CSS defaults to (light, here).
        Anything that changes the theme <em>after</em> that paint is visible as a flash — the only
        question is how long the gap is, and whether the resolved theme even differs from the default.
      </p>
    </div>
  </div>

preview

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