如何在 PWA（Chrome 桌面）中設置狀態欄的字體顏色

Question

我們已經為我們的網絡應用創建了一個 PWA，現在想要將狀態欄字體顏色設置為白色。

有很多關於如何在 Chrome 中設置桌面 PWA 狀態欄背景顏色的信息，例如：

<meta name="theme-color" content="#f44336">

這為 PWA 提供了紅色背景顏色和黑色字體顏色。 如何將字體顏色設置為白色？

提前致謝。

Answer 1

我找不到解決方案，但對此有一個合乎邏輯的破解。 看起來，如果你取一個顏色的比例，鉻字體越暗，白色，黑色越亮。

例如，如果您設置此“深”藍色，則假設您希望主題顏色為藍色：

<meta name="theme-color" content="#2b6cb0">

字體顏色將為白色

或者這個“淺”藍

<meta name="theme-color" content="#4299e1">

字體將為黑色。

總而言之，把你選擇的顏色稍微變深一點，然后把它放在主題顏色中，看看它什么時候變成白色。 希望這有幫助。

Answer 2

將此添加到您的 HTML 頭部，適用於 Chrome 桌面和 Android

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0ed3cf">
<meta name="msapplication-TileColor" content="#0ed3cf">
<meta name="theme-color" content="#0ed3cf">