自動深色主題

André Cipriani Bandarra

Chrome 96 推出了在 Android 裝置上自動深色主題的來源試用。 透過這項功能，瀏覽器會為淺色主題網站套用自動產生的深色主題。 當使用者在作業系統中選擇採用深色主題時。 如要停用深色主題，使用者可以在作業系統層級或 Chrome 的特定設定中停用該選項。

申請來源試用

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

請參閱說明文件 如何設定來源試用。 然後註冊 AutoDarkMode 來源試用 取得符記

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

內建開發人員工具

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

  1. 按一下三點圖示選單。
  2. 依序選取「More Tools」>「Rendering」。
  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 退出 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;
}

歡迎提供意見！

目前仍處於指定自動深色主題， 我們想聽聽所有與導入作業相關的意見回饋： 。

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

攝影者：Félix Besombes。