<meta name="theme-color">
Paints the browser around the page — the frame, not the painting.
It suggests a color for the interface surrounding the page: the tab bar on Android, the surroundings in Safari, the window of the installed app. It is the only metadata name that takes media — you can offer one color to the light theme and another to the dark one.
The myth is expecting it to change anything inside the page: nothing in the viewport moves. And its reach varies by browser and platform — it is progressive ornament: where it works, the frame matches the painting; where it doesn't, nothing breaks.
<meta name="theme-color" content="#eff6ff">
<meta name="theme-color" content="#172554"
media="(prefers-color-scheme: dark)">