【筆記】html meta tag: theme-color 設定方式

何謂 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 無設定顏色為例：

Linkedin on MacOS Safari

以 Facebook 設定了藍色為例：

Facebook on MacOS Safari

但 Facebook 雖然設定了藍色，在 Chrome(MacOS) 就是瀏覽器本身的顏色：

Facebook on MacOS Chrome

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>
        </>
    )
}