v150 · CSS · demo

Theme-Aware Icons

SVG icons set via background-image: light-dark(url(…), url(…)) — toggle the scheme and icons swap between their light-mode and dark-mode variants. Same CSS property, two image sources, no JavaScript.

Chrome 150+ — requires light-dark() with image values. Toggle below or use your OS setting.

Sun / Moon

swaps on scheme change

Check / X

different meaning per scheme

Document

stroke colour adapts

/* ✅ Chrome 150 — one declaration, two images */
:root { color-scheme: light dark; }

.icon-theme {
  background-image: light-dark(
    url("sun.svg"),    /* shown in light mode */
    url("moon.svg")   /* shown in dark mode  */
  );
  background-size: contain;
  background-repeat: no-repeat;
}

/* ❌ Before — needed a media query */
.icon-theme { background-image: url("sun.svg"); }
@media (prefers-color-scheme: dark) {
  .icon-theme { background-image: url("moon.svg"); }
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗