v150 · CSS · Dark Mode

Conditional Decorations

Use light-dark(none, url(…)) to show a decoration only in dark mode, or light-dark(url(…), none) for light-only. Swap checkmark icons in a list, add a starfield background in dark mode, or suppress a watermark when dark — all in CSS, no JavaScript or media queries.

The page respects your system color scheme. Use the buttons below to force a preview in either mode.
Preview as:
1 · Checklist — theme-aware checkmark via background-image on ::before
  • Zero JavaScript, zero media queries
  • The SVG fill automatically switches per theme
  • light-dark(dark-check.svg, light-check.svg)
  • Works for any bullet replacement: arrows, dots, custom glyphs
2 · Draft watermark — light mode only (light-dark(url(…), none))

Q2 Strategy Document

This document outlines our product direction for the second quarter. The DRAFT watermark is rendered via ::after { background-image: light-dark(url(watermark.svg), none) } — in dark mode, none means no image, so the watermark disappears.

Switch to dark mode above — the watermark vanishes.

3 · Starfield — dark mode only (light-dark(none, url(…)))
Welcome to the showcase

Switch to dark mode above — stars appear in the background.

4 · list-style-image — contrasting bullet per theme
  • Same markup, different bullet art per color scheme
  • Dark bullet circle in light mode, light bullet circle in dark mode
  • No SVG file requests — inline data URIs keep it self-contained
  • Scales to any list-style-image use case

code

/* ── Show decoration only in light mode ── */
.draft-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: light-dark(
    url("watermark.svg"),   /* light mode: show */
    none                    /* dark mode: hide */
  );
}

/* ── Show decoration only in dark mode ── */
.hero {
  background-image: light-dark(
    none,                   /* light mode: plain background */
    url("starfield.svg")    /* dark mode: show stars */
  );
}

/* ── list-style-image switches bullet art per theme ── */
.checklist {
  list-style-image: light-dark(
    url("check-on-light.svg"),
    url("check-on-dark.svg")
  );
}

/* ── Works for any image property ── */
.logo {
  background-image: light-dark(url("logo-dark.svg"), url("logo-light.svg"));
}
.icon::before {
  content: light-dark(url("icon-dark.svg"), url("icon-light.svg"));
}
.bordered {
  border-image: light-dark(url("border-light.png") 30, url("border-dark.png") 30);
}

see also

implementation reference

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