Theme native surfaces

Tell the browser your theme so scrollbars, pickers and menus match.

From web-design-guidelines (Web Interface Guidelines).

What color-scheme reaches

Compare scrollbar, date picker and fields in each theme.

App theme
No color-schemeBad
InvoicesSep
/* nothing: browser default is light */
color-scheme matchesGood
InvoicesSep
color-scheme: dark
:root { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

theme-color tints the chrome

Flip the page theme, then type a color on the left.

Page theme
One hard-coded valueBad
<meta name="theme-color" content="#ffffff">
Matches the backgroundGood
content="#0a0a0a" (dark)
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme: dark)">

const bg = getComputedStyle(document.body).backgroundColor;
document.querySelector('meta[name="theme-color"]').setAttribute("content", bg);

Give <select> its own colors

Open both menus and find Net 45.

Inherited colorsBad
background: transparent; color: inherit;
Explicit colorsGood
background-color: var(--bg); color: var(--fg);

select {
  background-color: var(--bg);
  color: var(--fg);
}

Why it matters, pros and cons

Why it matters

Native scrollbars, pickers and toolbars ignore CSS; these two hints reach them.

Pros

  • A few lines of CSS, no JavaScript.
  • Native controls keep their accessibility.
  • No white flashes in fields or toolbars.

Cons

  • Unstyled widgets and iframes also turn dark.
  • A manual theme toggle needs JavaScript to sync both.
  • theme-color support varies; desktop Firefox ignores it.