Theme-Aware Card (light-dark())

A card with a real light/dark toggle where every color — background, border, text, the switch, the CTA button, even its hover tint — comes from one `light-dark(<light>, <dark>)` pair per token, read against the element's own `color-scheme` property, instead of a duplicate `--color-light`/`--color-dark` custom-property set or a `[data-theme="dark"]` override block layered on top of the base rules. Flipping the toggle sets `color-scheme: dark` on the card via a plain CSS `:checked` sibling selector on a visually-hidden checkbox (the decades-old 'checkbox hack') — genuinely zero JavaScript, not even a demo-only script tag, a real step further than several of this catalog's own existing toggle-style entries ('Native Dialog Modal', 'View Transition Toggle') which needed at least a little JS. Real, current, sourced via WebSearch, cross-checked across multiple independent queries (MDN's `light-dark()` reference, una.im's 'Modern CSS Theming', pepelsbey.dev's 'Native HTML light and dark color scheme switching', buildmvpfast.com's 'Web Platform Baseline 2026' roundup, and mcss.dev's 'The modern way to implement CSS light/dark themes' — all agreeing on the same mechanism and version numbers): `light-dark()` for color values shipped Chrome/Edge 123, Firefox 120, Safari 17.5 — already Baseline 'Newly available' since May 2024, and tracked to reach Baseline 'Widely available' on 2026-11-13, so by the time this entry is read it may already have crossed that line. `color-mix()` (used here for the CTA's hover tint, nested as `color-mix(in oklch, light-dark(...), light-dark(...))` — functions that resolve to `<color>` can nest inside another color function per CSS Color 5) is further along still: Baseline 'Widely available' since 2023 (Chrome/Edge 111, Firefox 113, Safari 16.2). **A real discrepancy this run's own cross-checking caught, not silently picked past:** one WebSearch summary claimed `light-dark()`'s newer, separate extension to `<image>` values (swapping a background-image/mask by color-scheme, not just colors) had already reached Baseline 'Newly available' across Chrome/Firefox/Safari 27 — a second, more specific query (bram.us's own 'about to support images' piece, dated 2026-03-19, plus the web-platform-dx/developer-signals tracking issue) contradicted that: the image-value extension is only behind a flag in Chromium 148+, lands in Firefox 150 stable around April 2026, and has no Safari date at all. The more specific, version-numbered sources are trusted here; the flattering 'already Baseline' claim is not used, and the image-value extension is logged as a real but not-yet-safe follow-up, not built. **Honest fallback, same house style as the 'Auto-Contrast Color Swatch' entry:** a manually-picked static light-theme look ships as the default rule; a positive `@supports (color: light-dark(#fff,#000))` block (plus a narrower combined query for the `color-mix()` hover tint) overlays the live toggle and computed colors only where supported, hiding the fallback note — a non-supporting browser sees a correct, designer-matched static card, never a broken or half-themed one, and the toggle switch simply doesn't move (still fully keyboard-focusable, just inert, like any other graceful-degradation case in this catalog). No WebGL, no scroll-jacking, no router. (Vanilla example: live iframe preview + HTML/CSS tabs, no JS tab at all — click the switch to flip light/dark.)

<div class="ltd-wrap">
  <input type="checkbox" id="ltd-toggle" class="ltd-toggle-input">
  <div class="ltd-card">
    <div class="ltd-head">
      <strong class="ltd-title">Theme-aware card</strong>
      <label for="ltd-toggle" class="ltd-switch" aria-label="Toggle dark mode"><span class="ltd-switch-dot"></span></label>
    </div>
    <p class="ltd-body">Every color here comes from one light-dark() pair per token — no duplicate --color-light/--color-dark set, no [data-theme] block, no JS.</p>
    <span class="ltd-fallback-note">Static fallback shown — needs light-dark() support (Chrome/Edge 123+, Firefox 120+, Safari 17.5+) to see the live toggle.</span>
    <button class="ltd-cta" type="button">Get started</button>
  </div>
</div>