何謂 theme-color
Html Head 中有個叫 theme-color 的 meta 標籤，其 content 可以放 css 有效的 color 值，來影響瀏覽器或移動裝置的狀態欄和工具列的顏色。
<meta name="theme-color" content=“blue” />現在支援的環境，主要是 Safari(MacOS) 和 PWA (Progressive Web Application)。
如果沒有設定 theme-color，瀏覽器就會使用預設的顏色（light or dark）。
以 Linkedin 無設定顏色為例：
以 Facebook 設定了藍色為例：
但 Facebook 雖然設定了藍色，在 Chrome(MacOS) 就是瀏覽器本身的顏色：
theme-color 是讓使用體驗更好的 meta 標籤。這個體驗在一般網頁可能沒有那麼明顯，因為大家已習慣了網頁就是限縮在瀏覽器的某一個範圍中；但對 PWA 來說，由於沒有了瀏覽器的介面，影響就會比較顯著。
若沒設定 theme-color 的話，上方工具列就會留白，若剛好 PWA 的主題顏色是深色，留白的底就會讓整體顯得特別奇怪。
以我之前製作的高鐵時刻查詢網站為例：
可以看的出來在 PWA 時（右邊），上方的留白就顯得很不和諧，而 PWA 的核心之一，就是盡可能讓網頁模擬成手機 APP。對我來說，這個留白等於是功虧一簣。
當然，由於 theme-color 目前只會運行在 Safari(MacOS) 和 PWA 上，而你又無法確保 user 會不會下載 PWA──畢竟多數人只會用瀏覽器開網頁或直接下載 APP 使用──theme-color 可能並不是那麼重要。但如果你閱讀到這邊，相信就是想多瞭解它。接下來就讓我們看一下使用方法。
使用方法
<html>
<head>
<meta name="theme-color" content=“blue” />
</head>
</html>
content 裡面要放有效的 CSS color 值，常見的有：
/* 命名顏色 */
rebeccapurple
aliceblue
/* RGB 十六進制 */
#f09
#ff0099
/* RGB（紅、綠、藍） */
rgb(255 0 153)
rgb(255 0 153 / 80%)
給系統的淺色或深色主題設定不同的 theme-color
prefers-color-scheme 為 user 自行對裝置設定的偏好主題顏色（深或淺），我們可以直接針對深色或淺色設定不同的 content：
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
使用 JavaScript 動態改變 theme-color
如果網頁有提供工具讓 user 自行改變主題顏色，或是希望 user 點選不同的內容時呈現不同的主題顏色，則可以考慮使用 js 動態調整 theme-color 的內容：
document
.querySelector("meta[name='theme-color']")
.setAttribute("content", red);
在 React 中動態改變 theme-color
若是希望讓系統初始化時，程式自動根據各種情境來改變 theme-color，請記得在 component 渲染完好後再觸發，也就是使用 useEffect：
import { FC } from "react";
const ThemeComponent: FC<> = () => {
useEffect(() => {
document
.querySelector("meta[name='theme-color']")
.setAttribute("content", red);
}, []);
}
Next.js 設定 theme-color 方法
在 _app.tsx 中設定：
// _app.tsx
import { FC } from "react";
import { AppProps } from "next/app";
import Head from "next/head";
const App: FC<AppProps> = ({ Component, pageProps }) => {
return (
<>
<Head>
<meta name="theme-color" content="#0000ff" />
</Head>
</>
)
}
成果
以我最近製作的台鐵時刻查詢網站來說，深色和淺色的主題會各自有對應的 theme-color，並且在 user 手動切換主題顏色時，theme-color 也會一起變動！
結論
不使用 theme-color 不會有什麼問題，但我認為這是讓 PWA 拼上最後一塊拼圖的標籤。如果有時間的話，不妨設定看看。