名为 theme-color 的 HTML <meta> 标签可以指定一个色值。如果浏览器或操作系统支持这一特性，就会改变状态栏 / 地址栏的颜色。通常把它设置为与网页背景一致，给用户更沉浸的「全面屏」效果。这对 Web App 尤为重要。
然而，如果你使用 Angular 来构建 PWA，可能观察到 theme-color 被设置为一个醒目的蓝色。我检查了好几个 Angular 应用，发现开发者在意识到该特性的存在后，都会尝试去控制 theme-color 设置为正确的颜色，但由于未能定位蓝色的来源，所以页面加载过程中依然会刷出蓝色来。
这个问题是因为使用 Angular CLI 命令 ng add @angular/pwa 去启用 service worker 时，Angular CLI 自动向 src/index.html 添加了 <meta name="theme-color" content="#1976d2">，其中 #1976d2 Material UI 的常用颜色。去掉这行硬编码的标签即可。
无论是地址栏还是状态栏都不是 DOM 元素，再加上移动端取色不如桌面方便，以及 Angular CLI 通常没有「填个默认值等开发者修改」的行为，这些因素共同导致了该问题定位困难。除非在启用 service worker 时及时注意到了这一变化。（说来离谱，diff 就明明白白摆在那里，但看上去，和我一样 commit 时没长眼睛的人还不少。）
因为不确定是否是预期的行为，所以提 issue 问了下。Angular CLI 爽快地标为 bug （其实我觉得不是……）并且光速移除了相关标签的默认添加，所以 20.0.0 之后的 release 不会再有这个坑了。
想不到 Angular 维护状态这么好，换作我周一上班肯定没兴趣处理这些积压的鸡毛蒜皮。这无疑给人信心。
Fixing the Blue Status Bar in Angular PWAs
The HTML <meta> tag named theme-color allows developers to set a color value. When supported by the browser or OS, it changes the appearance of UI elements like status bar or address bar. This is typically set to match the background color of page, bringing a more immersive “full-screen” feel—especially important for Web Apps.
However, if you're building a Progressive Web App (PWA) with Angular, you might notice the theme-color set to a blue. I’ve checked several Angular-based PWAs and found that while developers often try to control the theme-color once they’re aware of this feature, they still struggle with a blue flash-obviously, they failed to locate where the blue is coming from.
The root cause: when you set up the service worker via Angular CLI’s ng add @angular/pwa, it silently injects the following line into your src/index.html:
<meta name="theme-color" content="#1976d2">The value #1976d2 is a primary color of Material UI. The fix is simple: just remove this hardcoded tag.
What makes this tricky is that neither the address bar nor the status bar is part of the DOM, and color-picking on mobile isn’t as straightforward as on desktop. Moreover, Angular CLI generally avoids opinionated defaults (e.g., it doesn't prefill <html lang="en"> expecting developer to change it). So unless you happened to notice the tag being added when setting up the service worker, you likely missed it.
(Kind of absurd—it’s right there in the diff, but apparently I’m not the only one who commits without really reviewing...)
Since I wasn’t sure whether this behavior was intentional, I filed an issue. The maintainer of Angular CLI promptly labeled it a bug (I’m not convinced it really is one...) and swiftly removed the tag from the schematic. It won't be included from version 20.0.0 on.
Honestly, I didn’t expect Angular to be this well-maintained.If it were me, I’d probably ignore such nitpicky issues until Monday morning rolled around. It really builds confidence in the project.