主題設定

即使是品牌宣傳也能靈活回應。 您可以根據使用者的偏好設定調整網站的呈現方式。 不過，首先說明如何擴展網站的品牌宣傳，以便加入瀏覽器本身。

自訂瀏覽器介面

部分瀏覽器可讓您根據網站的調色盤建議主題顏色。 瀏覽器介面會根據建議的顏色進行調整。在網頁的 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，也可以套用自訂屬性。

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

除了提供深色模式外，你也可以根據使用者偏好調整網站。 接下來，我們將說明如何讓網站適應各種無障礙功能。

隨堂測驗

測試您對主題設定的瞭解程度