`<meta name="color-scheme">`

Baseline 已廣泛支援

此功能已成熟，並可在多種裝置和瀏覽器版本上執行。自 ⁨2022 年 1 月⁩起，它已在各種瀏覽器中可用。

<meta> 元素中 name 屬性的 color-scheme 值，用於指示使用者代理應為頁面使用的建議顏色方案。如果指定了該屬性，您將使用 <meta> 元素中的 content 屬性來定義顏色方案，其值為有效的 CSS color-scheme 值。

主題顏色在文件級別上起作用，這與 CSS color-scheme 屬性指定單個元素的首選和可接受的顏色方案的方式相同。<meta name="color-scheme"> 的主要用途是指示淺色和深色模式的相容性和偏好順序。例如，要指示文件偏好深色模式，但也支援淺色模式

html

<meta name="color-scheme" content="dark light" />

您可以使用 prefers-color-scheme CSS 媒體功能來適應當前的顏色方案。

用法說明

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

具有 name=color-scheme 的 <meta> 元素必須有一個 content 屬性，該屬性將顏色方案定義為 CSS color-scheme 值。content 屬性可以是以下之一：

normal: 文件不瞭解顏色方案，應使用預設調色盤進行渲染。
light、dark、light dark、dark light: 文件支援的一種或多種顏色方案。多種顏色方案表示文件首選第一種方案，但如果使用者偏好第二種方案，則第二種方案也是可接受的。多次指定相同的顏色方案與僅指定一次具有相同的效果。
僅淺色: 指示文件僅支援淺色模式，具有淺色背景和深色前景。only dark是無效的，因為強制文件以深色模式渲染（當它不相容時）可能導致內容不可讀，並且所有主流瀏覽器在未另行配置的情況下都預設使用淺色模式。

任何有效的媒體型別或查詢。如果提供，當媒體查詢匹配時，將向瀏覽器建議 content 屬性中定義的文件顏色方案選項。這主要對 prefers-color-scheme CSS 媒體功能有用。

以下示例向瀏覽器指示該頁面支援淺色和深色主題。使用淺色還是深色方案取決於使用者偏好，例如作業系統級設定或瀏覽器設定。

html

<meta name="color-scheme" content="light dark" />

規範
HTML # meta-color-scheme

此頁面最後修改於 ⁨2025 年 7 月 9 日⁩，由 MDN 貢獻者更新。