連品牌宣傳活動都能採用回應式設計。您可以根據使用者的偏好調整網站的呈現方式。 但首先，請參閱以下說明，瞭解如何擴展網站品牌，將瀏覽器本身納入其中。
自訂瀏覽器介面
部分瀏覽器可根據網站的調色盤建議主題顏色。瀏覽器介面會配合你建議的顏色調整。在網頁的 head 中，以名為 theme-color 的 meta 元素新增顏色。
<meta name="theme-color" content="#00D494">
您可以使用 JavaScript 更新 theme-color 的值。但請善用這項功能。
如果瀏覽器的色彩配置頻繁變更，使用者可能會感到困擾。考慮以細微的方式調整主題顏色。如果變更過於突兀，使用者會感到不悅而離開。
您也可以在網頁應用程式資訊清單檔案中指定主題顏色。 這是內含網站中繼資料的 JSON 檔案。
連結至文件 head 中的資訊清單檔案。使用 link 元素，並將 rel 值設為 manifest。
<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 撰寫了prefers-color-scheme一文，說明如何為深色模式圖示使用 SVG 網站圖示。
使用自訂屬性設定主題
如果您在整個 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，也可以在其中套用自訂屬性。
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; }。<head> 標記中新增 <meta name="supported-color-schemes" content="light dark">。