自動深色主題

André Cipriani Bandarra

Chrome 96 推出了在 Android 裝置上自動深色主題的來源試用。有了這項功能，當使用者在作業系統中選擇深色主題後，瀏覽器就會將自動產生的深色主題套用至淺色主題網站。使用者可以停用 OS 層級或 Chrome 中的特定設定，選擇不使用深色主題。

申請來源試用

您也可以透過原始試驗，為使用者啟用調暗演算法。透過測試，您可以測試自動深色主題對於 KPI 的成效。

請參閱說明文件，瞭解如何設定原始試用版，然後註冊 AutoDarkMode 原始試用版，取得權杖。

在裝置上測試自動深色主題

使用開發人員工具

如要在開發人員工具中啟用自動深色主題：

  1. 按一下三點圖示選單。
  2. 依序選取「更多工具」和「算繪」。
  3. 在「Emulate 自動深色模式」選項中選取「啟用」。

使用 Android 手機

如要在 Android 手機上測試自動深色主題功能，請按照下列步驟操作：

  1. 前往 chrome://flags 並啟用「#darken-websites-checkbox-in-theme-setting」實驗。
  2. 接著，輕觸三點圖示選單，依序選取「設定」和「主題」，然後勾選「盡可能對網站套用深色主題」方塊。

淺色頁面現在會在手機上變暗。

依元素自訂

雖然我們希望自動深色主題在所有情況下都能產生良好的結果，但與開發人員的早期對話顯示，他們希望調整特定元素，以便更符合他們想要的外觀和風格。

在這個來源試用中，自訂功能是使用 JavaScript 來偵測使用者是否處於自動深色主題，然後自訂所需元素。

偵測自動深色主題

如要偵測使用者是否處於自動深色主題，請建立元素，並將 background-color 設為 canvas，並將色彩配置設為淺色。如果背景的計算色彩不是白色 (rgb(255, 255, 255))，系統會將自動深色主題套用至頁面。

<div id="detection"
     style="display: none; background-color: canvas; color-scheme: light">
</div>

const detectionDiv = document.querySelector('#detection');
// If the computed style is not white then the page is in Auto Dark Theme.
const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';
// Update element styles when Auto Dark Theme is applied.
if (isAutoDark) {
  const myElement = document.querySelector('#my-element');
  myElement.classList.add('autoDarkOnlyStyle');
}

自訂大量元素

如果您需要自訂的元素數量較多，上述解決方案可能難以擴充。或者，您也可以使用自動深色主題偵測功能，在頁面內文中加入標記類別：

function setAutoDarkClass() {
  // We can also use JavaScript to generate the detection element.
  const detectionDiv = document.createElement('div');
  detectionDiv.style.display = 'none';
  detectionDiv.style.backgroundColor = 'canvas';
  detectionDiv.style.colorScheme = 'light';
  document.body.appendChild(detectionDiv);
  // If the computed style is not white then the page is in Auto Dark Theme.
  const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';

  // remove the detection element from the DOM.
  document.body.removeChild(detectionDiv);

  // Set the marker class on the body if in Auto Dark Theme.
  if (isAutoDark) {
    document.body.classList.add('auto-dark-theme');
  }
}
document.addEventListener("DOMContentLoaded", setAutoDarkClass);

接著，視需要使用 CSS 自訂元素：

.auto-dark-theme > #my-element {
  border-color: red;
}

個別元素自訂 API 仍處於初期開發階段。我們正與標準團隊合作，為開發人員提供更具表達力的 API，以便選擇不參與。您可以參閱這個 GitHub 問題中的對話。

如何停用自動深色主題

除了尊重使用者在裝置上的選擇外，深色主題也對使用者有幫助，例如電池續航力的改善和無障礙功能。強烈建議您實作自訂深色主題，而非停用自動深色主題，以尊重使用者的偏好設定並保留這些優點。

不過，如果無法實作您自己的深色主題，且自動深色主題產生的結果不盡理想，您可以選擇停用這項功能。

使用中繼標記

選擇停用自動深色主題的方法，是將下列中繼標記加入網頁標頭。 使用中繼標記的好處是，可完全避免自動深色主題套用，而這可能會導致「內容閃爍變暗」。

<head>
  <meta name="color-scheme" content="only light">
  ...
</head>

停用個別元素

另一種選擇停用方式是將 color-scheme CSS 屬性的值設為 only light。雖然每個元素的選擇退出功能可用於讓整個網頁不採用自動夜間模式，但這種做法的優點是只會讓網頁的特定部分選擇退出：

#my-element {
  color-scheme: only light;
}

不過，您仍可使用這個方法在 :root 元素上設定色彩配置，將整個網頁從自動深色主題中選擇不採用：

:root {
  color-scheme: only light;
}

歡迎提供意見！

我們仍在指定自動深色主題，並希望能針對導入過程的各個層面 (從深色演算法結果到元素自訂和選擇退出功能的開發人員 API) 收到意見回饋。

你可以透過許多管道提供意見回饋：

相片來源：Félix Besombes。