品牌宣傳也是回應式內容。 您可以根據使用者的偏好調整網站的呈現方式。首先，以下說明如何延伸網站的品牌宣傳元素，納入瀏覽器本身。
自訂瀏覽器介面
有些瀏覽器可讓您根據網站的調色盤建議主題顏色。
瀏覽器介面會依照建議的顏色調整。在網頁 head 內名為 theme-color 的 meta 元素中加入顏色。
<meta name="theme-color" content="#00D494">
您可以使用 JavaScript 更新 theme-color 的值。但請謹慎使用這項電源。
如果瀏覽器的色彩配置過於頻繁，可能會導致使用者感到不堪負荷。並思考如何巧妙調整主題色彩。如果變更太不清楚，使用者可能會感到不悅。
您也可以在網頁應用程式資訊清單檔案中指定主題顏色。 這個 JSON 檔案包含網站中繼資料。
從文件的 head 連結到資訊清單檔案。使用 rel 值為 manifest 的 link 元素。
<link rel="manifest" href="/manifest.json">
在資訊清單檔案中，使用鍵/值組合列出中繼資料。
{
"short_name": "Clearleft",
"name": "Clearleft design agency",
"start_url": "/",
"background_color": "#00D494",
"theme_color": "#00D494",
"display": "standalone"
}
如果訪客決定將您的網站加入主畫面，瀏覽器就會使用資訊清單檔案中的資訊顯示適當的捷徑。
提供深色模式
許多作業系統可讓使用者指定淺色或深色調色盤，這是根據使用者的主題偏好來最佳化網站。你可以透過名為 prefers-color-scheme 的媒體功能存取這項偏好設定。
@media (prefers-color-scheme: dark) {
// Styles for a dark theme.
}
請使用 meta 元素中的 prefers-color-scheme 媒體功能指定主題顏色。
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
您也可以在 SVG 中使用 prefers-color-scheme 媒體功能。如果網站小圖示使用 SVG 檔案，則可為深色模式進行調整。
Thomas Steiner 針對 SVG 網站小圖示中有 prefers-color-scheme 提到深色模式圖示。
使用自訂屬性進行主題設定
如果您在 CSS 的多個位置都使用相同的顏色值，那麼在 prefers-color-scheme 媒體查詢中重複所有選取工具可能會很費力。
body {
background-color: white;
color: black;
}
input {
background-color: white;
color: black;
border-color: black;
}
button {
background-color: black;
color: white;
}
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
input {
background-color: black;
color: white;
border-color: white;
}
button {
background-color: white;
color: black;
}
}
使用 CSS 自訂屬性儲存顏色值。自訂屬性的運作方式與程式設計語言中的變數一樣。您不需要更新變數名稱，即可更新變數的值。
如果您在 prefers-color-scheme 媒體查詢中更新自訂屬性的值，就不用寫入所有選取器兩次。
html {
--page-color: white;
--ink-color: black;
}
@media (prefers-color-scheme: dark) {
html {
--page-color: black;
--ink-color: white;
}
}
body {
background-color: var(--page-color);
color: var(--ink-color);
}
input {
background-color: var(--page-color);
color: var(--ink-color);
border-color: var(--ink-color);
}
button {
background-color: var(--ink-color);
color: var(--page-color);
}
如需使用自訂屬性設定主題的進階範例，請參閱建構色彩配置。
圖片
如果您在 HTML 中使用可擴充向量圖形，也可以在該處套用自訂屬性。
svg {
stroke: var(--ink-color);
fill: var(--page-color);
}
現在起，您的圖示會隨著網頁上的其他元素而改變顏色。
如要降低以深色模式顯示的相片亮度，您可以在 CSS 中套用濾鏡。
@media (prefers-color-scheme: dark) {
img {
filter: brightness(.8) contrast(1.2);
}
}
建議你使用深色模式，將部分圖片完全替換掉。
舉例來說，可能會有色彩配置較深的地圖。使用包含 <source> 元素的 <picture> 元素與 prefers-color-scheme 媒體查詢。
<picture>
<source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
<img src="lightimage.png" alt="A description of the image.">
</picture>
表單
瀏覽器會為表單欄位提供預設調色盤，讓瀏覽器知道你的網站同時提供深色和淺色模式。 如此一來，瀏覽器就能為表單提供適當的預設樣式。
請將以下程式碼新增到 CSS：
html {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
您也可以使用 HTML。請在文件的 head 中新增以下程式碼：
<meta name="supported-color-schemes" content="light dark">
您可以使用 CSS 中的 accent-color 屬性設定核取方塊、圓形按鈕和其他表單欄位的樣式。
html {
accent-color: red;
}
深色主題的品牌顏色往往較為柔和。您可以更新 accent-color 值以使用深色模式。
html {
accent-color: red;
}
@media (prefers-color-scheme: dark) {
html {
accent-color: pink;
}
}
為此，使用自訂屬性是合理的，以便將所有顏色宣告放在同一處。
html {
color-scheme: light;
--page-color: white;
--ink-color: black;
--highlight-color: red;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
--page-color: black;
--ink-color: white;
--highlight-color: pink;
}
}
html {
accent-color: var(--highlight-color);
}
body {
background-color: var(--page-color);
color: var(--ink-color);
}
提供深色模式只是根據使用者偏好調整網站，只是舉例說明。接下來，我們將說明如何根據各種無障礙功能考量調整網站。
隨堂測驗
測驗主題設定相關知識
如要提供會影響網頁外瀏覽器的主題顏色，請使用：
<meta> 標記時才能使用。manifest.json，並包含指定主題顏色的欄位，用於調整應用程式在行動裝置主畫面開啟的外觀。<meta> 標記<head> 標記中看到這個主題顏色，避免使用不必要的閃爍色彩。如要結合使用者的系統偏好來套用淺色或深色主題，請使用：
(prefers-color-scheme) 媒體查詢因此支援深色主題，但所有表單輸入內容仍是淺色主題。建議做法
html { color-scheme: light dark; } 新增至 CSS。<meta name="supported-color-schemes" content="light dark"> 加入 HTML <head> 標記。