Tint the browser to match

Match theme-color to the banner or dim over the address bar.

Paco Coursey@pacocoursey
Tinted Safari theme-color based on user action
Nov 11, 2022View on X ↗
Paco Coursey@pacocoursey
Banners that adapt the theme-color
Jul 3, 2023View on X ↗

Both posts are videos; the demo rebuilds the technique.

Banner and sheet

Show the banner, then open the sheet.

Chrome stays whiteBad
9:41ui-lab.app
Saved to your library
theme-color never changes
Chrome followsGood
9:41ui-lab.app
Saved to your library
theme-color = what is under it
const meta = document.querySelector('meta[name="theme-color"]');

meta.setAttribute("content", "#171717");   // banner is showing
meta.setAttribute("content", "#8a8a8a");   // sheet dims the page
meta.setAttribute("content", "#ffffff");   // back to the page colour

Why it matters, pros and cons

Why it matters

The address bar is part of your page. If it keeps one color, the banner and dim end at a visible seam.

Pros

  • The banner and the bar read as one surface, so the page feels taller.
  • Dimming the bar with the overlay stops the bright strip above a modal.
  • One meta tag, set from the same state that shows the banner or sheet.

Cons

  • Only phone browsers that support theme-color show it; desktop mostly ignores it.
  • Set every theme-color tag, including the media-specific ones, or the wrong one wins.
  • The bar color cannot animate in all browsers, so it may snap while the page fades.