1. Web
  2. HTML
  3. 參考
  4. 元素
  5. <meta>
  6. <meta> name
  7. theme-color

<meta name="theme-color">

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

<meta> 元素中 name 屬性的 theme-color 值，表示使用者代理應該用來自定義頁面或周圍使用者介面的顯示顏色的建議。如果指定了，您可以使用 <meta> 元素中的 content 屬性，以 CSS <color> 值來定義主題顏色。

例如，要指示文件應將 cornflowerblue 用作主題顏色，請將 <meta> 設定為：

html
<meta name="theme-color" content="cornflowerblue" />

要設定主題顏色元資料適用的媒體，請包含具有有效媒體查詢列表的 media 屬性（請參閱 theme-color 媒體查詢示例）。

用法說明

<meta name="theme-color"> 元素具有以下附加屬性：

content

具有 name=theme-color 的 <meta> 元素必須有一個 content 屬性來定義主題顏色。content 屬性的值如下：

<color> 值

一個有效的顏色值，例如十六進位制、RGB、命名顏色等。

media 可選

任何有效的媒體型別或查詢。如果提供，當媒體查詢匹配時，content 屬性中定義的文件主題顏色的選項將建議給瀏覽器。

示例

設定顏色值

考慮以下使用 <meta> 設定主題顏色的程式碼：

html
<meta name="theme-color" content="#4285f4" />

下圖顯示了此設定在 Chrome 上的 Android 移動裝置上的效果：

Image showing the effect of using theme-color

圖片來源：摘自 Icons & Browser Colors，由 Google 建立和共享，並根據 Creative Commons 4.0 Attribution License 的條款使用。

將媒體查詢與 theme-color 結合使用

您可以在 media 屬性中提供媒體型別或查詢。然後，僅當媒體條件為真時，才會設定 theme-color。例如：

html
<meta
  name="theme-color"
  content="cornflowerblue"
  media="(prefers-color-scheme: light)" />
<meta
  name="theme-color"
  content="dimgray"
  media="(prefers-color-scheme: dark)" />

規範

規範
HTML
# meta-theme-color

瀏覽器相容性

另見

  • <meta> name 屬性 color-scheme 值
  • color-scheme CSS 屬性
  • prefers-color-scheme 媒體查詢

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者 修改。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤
© . Content available under a Creative Commons license.