v150 · CSS · Color scheme

List Style Bullets

Use light-dark() with list-style-image and content to swap bullet icons between light and dark mode — checkmarks, arrows, numbered badges, and status icons that invert without a media query.

Current color-scheme: light

Checkmark bullets (content::before)

  • Zero media queries needed
  • Single rule covers both schemes
  • Works with inline SVG data URIs
  • Falls back gracefully

Technique: content: light-dark(url(…), url(…)) on ::before

Arrow bullets (list-style-image)

  • Blue arrow in light mode
  • Light blue arrow in dark mode
  • Uses the list-style-image property
  • No pseudo-element required

Technique: list-style-image: light-dark(url(…), url(…))

Numbered badges (background-image)

  1. Fetch the resource
  2. Parse the response
  3. Update the store
  4. Notify subscribers

Technique: background-image: light-dark(url(…), url(…)) on ::before

Status icons (done / pending)

  • Design review
  • Spec written
  • Implementation
  • Tests passing
  • Ship

Technique: content: light-dark(…, …) per status class

/* Toggle bullet SVG with color-scheme, no media query */

/* list-style-image variant */
ul.arrows {
  list-style-image: light-dark(
    url("arrow-dark.svg"),   /* shown in light mode */
    url("arrow-light.svg")  /* shown in dark mode  */
  );
}

/* content pseudo-element variant */
ul.checks li::before {
  content: light-dark(
    url("check-dark.svg"),
    url("check-light.svg")
  );
}

/* Required: tell the browser which scheme you're in */
:root { color-scheme: light dark; }

see also

implementation reference

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