自動深色主題

安德烈西普利亞尼班達拉

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

申請來源試用

您也可以透過來源試用，為使用者啟用調暗演算法。藉此測試自動深色主題對 KPI 的成效。

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

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

內建開發人員工具

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

  1. 按一下三點圖示選單。
  2. 依序選取「更多工具」和「轉譯」。
  3. 在「Emulate auto Dark mode」選項上選取「啟用」。

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