Theme-Swapped Logomark (light-dark() images)

A business card where the LOGOMARK ITSELF — not just the surrounding colors — swaps to a different image asset by color scheme, via `light-dark()` taking `<image>` values (`url()`, `image-set()`, `none`), not just `<color>` values. This is the direct, now-shippable follow-up this catalog's own existing 'Theme-Aware Card (light-dark())' entry flagged and explicitly declined to build: that entry's own description states a WebSearch summary claiming the image-value extension was already Baseline 'Newly available' was caught as wrong by a second, more specific check (bram.us's 'about to support images', dated 2026-03-19, plus the web-platform-dx/developer-signals tracking issue), which found it was only behind a flag in Chromium 148+ with a Firefox 150 date and no Safari date — logged then as 'a real but not-yet-safe follow-up, not built.' **Re-checked this run, now past that line, sourced fresh:** Chrome's own 150 stable release notes (stable June 30, 2026, found via WebSearch) confirm `light-dark()` now accepts image values in author stylesheets (previously UA-stylesheet-only) for `background-image`, `list-style-image`, `border-image-source`, `cursor`, and `content`; the Chromium 'Intent to Ship: CSS light-dark() with image values' thread (blink-dev, dated May 26, 2026) confirms the same property list and states Firefox already shipped it; a Mozilla Bugzilla entry for the same behavior shows status 'RESOLVED FIXED' on the Firefox 150 branch. Two independent shipping engines, version-numbered, not a single blog's guess — the same cross-checking discipline the flagged entry itself used before refusing to build it prematurely. Safari has no date in any source checked this run, stated plainly rather than guessed. **Honest limit on what this run could verify live:** this sandbox's pinned Chromium (141.0.7390.37) is well below the Chrome 150 baseline this feature needs — `CSS.supports('background-image','light-dark(url(a),url(b))')` returns `false` here, same engine-lag this catalog has disclosed on other entries (e.g. 'Carousel Tablist Markers'), so the actual cross-theme image swap could not be watched happen in this run's own browser, only confirmed as correctly authored and safely gated. What WAS verified live, with a real headless-Chromium render (not a guess): the component's default/fallback state renders correctly — a two-ring logomark in dark ink on the light card, title, body copy, and an honest 'static fallback' note, with the dark-mode toggle switch correctly inert (its dot does not move; `color-scheme` and the image swap both live only inside the `@supports` block) — exactly the 'never broken, never half-themed' fallback contract this catalog's other `light-dark()` entry already established. Separately, the raw stylesheet was inspected via the CSSOM to confirm the `@supports (background-image: light-dark(url(a), url(b)))` block itself parses as a real `CSSSupportsRule` with all 7 of its nested rules intact (not silently dropped by a syntax error this sandbox's older engine might otherwise mask) — real proof the authored CSS is well-formed, even though its *matching* behavior can't be watched fire here. Checked for overlap first: the existing 'Theme-Aware Card' entry only ever pairs `light-dark()` with `<color>` values for backgrounds/text/borders and never touches `background-image`; genuinely separate, narrow ground, and the two entries share the same checkbox-hack toggle mechanism by design rather than inventing a second one. Zero WebGL, zero scroll-jacking, zero JS (same checkbox-hack as 'Theme-Aware Card') — fits the DIY $999 tier cleanly on the real use case a small-business site actually has (swap a logo/icon asset for dark mode instead of relying on a CSS filter trick or shipping two `<picture>` sources), though it can't be added to `docs/diy-website-style-catalog.md` this run since that doc is still missing (see this run's log entry). (Vanilla example: live iframe preview + HTML/CSS tabs, no JS tab at all — click the switch; on an unsupported engine the mark and switch stay static and inert by design, not broken.)

<div class="tsl-wrap">
  <input type="checkbox" id="tsl-toggle" class="tsl-toggle-input">
  <div class="tsl-card">
    <div class="tsl-mark" aria-hidden="true"></div>
    <div class="tsl-head">
      <strong class="tsl-title">Apex Flow</strong>
      <label for="tsl-toggle" class="tsl-switch" aria-label="Toggle dark mode"><span class="tsl-switch-dot"></span></label>
    </div>
    <p class="tsl-body">The logomark itself swaps image assets by color scheme via light-dark() on background-image — not just recolored, a different image per theme, zero JS.</p>
    <span class="tsl-fallback-note">Static fallback shown — needs light-dark() image-value support (Chrome/Edge 150+, Firefox 150+) to see the live swap.</span>
  </div>
</div>