v150 · CSS · Color scheme

Border Image Swap

Use light-dark() inside border-image to switch decorative border SVGs between light and dark mode — no media query, no JavaScript toggle on the style, no duplicated rule.

Current color-scheme: light

Diagonal stripes

SVG stripe pattern inverts between schemes.

border-image: light-dark(url(dark-stripes.svg), url(light-stripes.svg)) 12 repeat

Dot frame

Dot colour flips to maintain visibility in each scheme.

border-image: light-dark(url(dark-dots.svg), url(light-dots.svg)) 10 round

Gradient accent

Blue gradient in light → rose gradient in dark.

border-image: light-dark(url(blue-grad.svg), url(rose-grad.svg)) 8 stretch

Hide border in dark

Border shows in light, disappears in dark (none).

border-image: light-dark(url(frame.svg), none) 10 stretch

/* All four patterns — zero media queries */

/* 1. Swap decorative stripe SVG */
.card {
  border: 12px solid transparent;
  border-image: light-dark(
    url(stripes-dark.svg),
    url(stripes-light.svg)
  ) 12 repeat;
}

/* 2. Toggle to none in dark mode */
.card {
  border: 10px solid transparent;
  border-image: light-dark(url(frame.svg), none) 10 stretch;
}

/* Required on the root to activate light-dark() */
: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 ↗