Chrome 96 針對 Android 裝置推出了自動深色主題的來源試用。有了這項功能,使用者在作業系統中選擇採用深色主題時,瀏覽器就會將自動產生的深色主題套用至淺色主題網站。如要選擇停用深色主題,可以在 OS 層級或 Chrome 的特定設定中停用相關選項。
申請來源試用
您也可以透過來源試用,為使用者啟用調暗演算法。藉此測試自動深色主題對 KPI 的成效。
請參閱說明文件,瞭解如何設定來源試用,然後註冊 AutoDarkMode 來源試用以取得權杖。
在裝置上測試自動深色主題
內建開發人員工具
如何在開發人員工具中啟用自動深色主題:
- 按一下三點圖示選單。
- 依序選取「更多工具」和「轉譯」。
- 在「Emulate auto Dark mode」選項上選取「啟用」。
使用 Android 手機
如何在 Android 手機上測試自動深色主題:
- 前往
chrome://flags
並啟用#darken-websites-checkbox-in-theme-setting
實驗。 - 接著,輕觸三點圖示選單,然後依序選取「設定」和「主題」,然後勾選「盡可能將深色主題套用到網站」方塊。
現在手機上的淺色頁面會變暗。
個別元素自訂
即使我們的目標是讓自動深色主題在所有情況下都能產生優質結果,但先前與開發人員討論後,仍建議他們調整特定元素,以便根據所需外觀和風格進行調整。
在這項來源試用中,可以使用 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,以便自訂及停用元素。
你可以向多個管道提供意見回饋:
- 透過開發人員問卷調查。
- 解決 Chromium 專案錯誤。
- 透過來源試用意見回饋表單。
相片來源:Félix Besombes。