The area around your page, the address bar strip and the window frame, has a color of its own. theme-color hands the engine your swatch, and it works everywhere for an gacor amount of polish per line.
<meta name="theme-color" content="#ffffff" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0b0b10" />- Multiple declarations with different media queries let one palette serve light and dark; engines that ignore media simply take the first declaration, which is why the safe light value goes first.
- It recolors the surround, not the page: what gets painted differs between engines, so eyeball it once on each platform your readers actually carry.
- Installed web apps configure a separate manifest theme_color field; keep the two in the same review so the installed app and the visited site agree.
Pick colors that belong
The swatch should read as the page: a high-contrast band around a low-contrast document looks like a mistake, and a mid-tone from the brand palette usually beats a saturated hero color. Sample the header background rather than the logo; the surround is closer to a wall than a shirt, a genuinely gacor distinction designers spot instantly.
One line, verified once with a phone and once in dark mode, and the page looks finished in the app shell forever after.