自動深色主題

André Cipriani Bandarra

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

申請來源試用

您也可以透過原始試驗，為使用者啟用調暗演算法。這樣您就能測試自動深色主題對 KPI 的影響。

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

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

使用開發人員工具

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

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

使用 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。