light-dark() — one rule, both themes

<div class="pg">
    <h1 class="pg-title">🎮 <code>light-dark()</code> — one rule, both themes</h1>
    <p class="pg-sub">
      Six color pairs are declared <strong>once</strong> in this page, with
      <code>light-dark(light, dark)</code>. There is no
      <code>@media (prefers-color-scheme: dark)</code> block anywhere in the file.
      Watch the same declarations produce two different designs — then set
      <code>color-scheme</code> yourself and find the bug that catches everyone.
    </p>

<div class="banner info" id="support" hidden>
      <strong>Heads up:</strong> this browser doesn't support <code>light-dark()</code>,
      so the panels below will all look light. It needs Chrome&nbsp;123+, Firefox&nbsp;120+,
      or Safari&nbsp;17.5+.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> The same CSS, two schemes</div>
      <p class="hint" style="margin-top:0">
        Both cards below are styled by the <em>identical</em> five declarations. The only
        difference is the <code>color-scheme</code> on their container. This pair is always
        shown so you can see both outcomes no matter what your own device prefers.
      </p>
      <div class="two-up">
        <div class="scheme scheme-light">
          <div class="scheme-head"><b>Light</b><code>color-scheme: light</code></div>
          <div class="demo-card">
            <h4>Monthly report</h4>
            <p>Your team shipped 24 changes this week, up from 18.</p>
            <button class="demo-cta" type="button">View report</button>
            <input class="demo-input" type="text" placeholder="Search reports…" aria-label="Search reports (light preview)" />
          </div>
        </div>
        <div class="scheme scheme-dark">
          <div class="scheme-head"><b>Dark</b><code>color-scheme: dark</code></div>
          <div class="demo-card">
            <h4>Monthly report</h4>
            <p>Your team shipped 24 changes this week, up from 18.</p>
            <button class="demo-cta" type="button">View report</button>
            <input class="demo-input" type="text" placeholder="Search reports…" aria-label="Search reports (dark preview)" />
          </div>
        </div>
      </div>
      <p class="hint">
        Notice the text cursor and placeholder in each search box, and the scrollbars if you
        shrink the window. <code>color-scheme</code> restyles the browser's own widgets too —
        that's a second job the media-query approach never did for you.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Now you drive <code>color-scheme</code></div>

<div class="seg" id="seg" role="group" aria-label="color-scheme value">
        <button type="button" data-cs="normal" aria-pressed="false">normal</button>
        <button type="button" data-cs="light dark" aria-pressed="true">light dark</button>
        <button type="button" data-cs="light" aria-pressed="false">light</button>
        <button type="button" data-cs="dark" aria-pressed="false">dark</button>
      </div>
      <p class="hint" style="margin-bottom:14px">
        This sets <code>color-scheme</code> on the preview below — exactly what
        <code>document.documentElement.style.colorScheme = …</code> does in a real theme toggle.
      </p>

<div class="scheme" id="live">
        <div class="scheme-head">
          <b>Your setting</b><code id="liveCs">color-scheme: light dark</code>
        </div>
        <div class="demo-card">
          <h4>Monthly report</h4>
          <p>Your team shipped 24 changes this week, up from 18.</p>
          <button class="demo-cta" type="button">View report</button>
          <input class="demo-input" type="text" placeholder="Search reports…" aria-label="Search reports (live preview)" />
        </div>
      </div>

<div class="status" id="status" style="margin-top:14px">
        <span class="dot info" id="dot"></span><span id="statusText">Following your system preference.</span>
      </div>
      <p class="hint" id="hint">
        Your device currently prefers <b id="sysPref">…</b>.
      </p>

<div class="presets">
        <button class="btn sm" data-preset="normal">🐛 Reproduce the bug</button>
        <button class="btn sm" data-preset="light dark">✅ Correct setup</button>
        <button class="btn sm" data-preset="dark">🌙 User forced dark</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Which argument won, and why</div>
      <p class="hint" style="margin-top:0">
        The <span class="mono arg-off">struck-through</span> value is the one the browser
        discarded for your current setting. Same source, different pick.
      </p>
      <div class="code" id="code" aria-live="polite"></div>
      <div class="swatches" id="swatches" aria-live="polite"></div>
      <p class="hint">
        The values on the right are the colors that actually <em>painted</em>. Worth knowing:
        reading a custom property back with <code>getComputedStyle()</code> hands you the
        literal string <code>light-dark(#ffffff, #1f2937)</code>, not a color — the function
        resolves only when a real property uses the value. This panel reads invisible probe
        elements inside the preview to get the resolved color.
      </p>
    </div>
  </div>

preview

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