demo · v148

Dark Mode Borders

The bigger win from removing the UA border-color rule shows up in theme switching. Swap the panel theme — note how the modern tables track currentColor seamlessly while the legacy tables stay grey, breaking contrast against the new background.

Before Chrome 148, every table got a hardcoded mid-grey border from the UA stylesheet. In a light theme it looked fine. In a dark theme it disappeared. In a brand-coloured panel it clashed. Authors had to add border-color: currentColor to override the UA rule, and most forgot. With the rule removed, border: 1px solid just works — borders follow text colour across themes the way every other element does.

theme:

Modern (Chrome 148+) — border inherits currentColor

namerolestatus
aliceadminactive
bobeditoractive
carolviewerpaused

border: 1px solid; → border-color follows currentColor

Legacy (Chrome <148) — hard-coded grey border-color

namerolestatus
aliceadminactive
bobeditoractive
carolviewerpaused

border: 1px solid; border-color: #ccc; → fixed grey regardless of theme

the code

/* In Chrome 148+, this is enough: */
table, th, td { border: 1px solid; }

/* Pre-148, you had to specify the colour to override the UA stylesheet: */
table, th, td { border: 1px solid; border-color: currentColor; }

/* And in dark mode, the override was the only thing keeping the border visible. */
@media (prefers-color-scheme: dark) {
  body { background: black; color: white; }
  /* Without the override, table borders stayed grey-on-black — barely visible. */
}

see also

implementation reference

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