Chrome 96 memperkenalkan uji coba origin untuk Tema Gelap Otomatis di Android. Dengan fitur ini, browser menerapkan tema gelap yang dibuat secara otomatis ke situs bertema terang, saat pengguna memilih tema gelap dalam sistem operasi. Pengguna dapat memilih untuk tidak menggunakan tema gelap dengan menonaktifkan opsi di tingkat OS atau di setelan tertentu di Chrome.
Mendaftar ke uji coba origin
Anda juga dapat mengaktifkan algoritma penggelapan untuk pengguna Anda, melalui uji coba origin. Hal ini memungkinkan Anda menguji performa Tema Gelap Otomatis dalam kaitannya dengan KPI.
Buka dokumentasi untuk mempelajari cara menyiapkan uji coba origin, lalu daftar ke uji coba origin AutoDarkMode untuk mendapatkan token.
Menguji Tema Gelap Otomatis di perangkat Anda
Dengan DevTools
Untuk mengaktifkan Tema Gelap Otomatis di DevTools:
- Klik menu tiga titik.
- Pilih Alat Lainnya, lalu Rendering.
- Pilih Aktifkan pada opsi Emulasikan mode gelap otomatis.
Di ponsel Android
Untuk menguji Tema Gelap Otomatis di ponsel Android:
- Buka
chrome://flags
dan aktifkan eksperimen#darken-websites-checkbox-in-theme-setting
. - Kemudian, ketuk menu tiga titik, pilih Setelan, lalu Tema, dan centang kotak dengan Terapkan Tema gelap ke situs, jika memungkinkan.
Sekarang, halaman yang terang akan menjadi gelap di ponsel.
Penyesuaian per elemen
Meskipun kami menargetkan Tema Gelap Otomatis untuk memberikan hasil yang baik dalam semua kasus, percakapan awal dengan developer menyarankan agar mereka ingin menyesuaikan elemen tertentu, agar lebih beradaptasi dengan tampilan dan nuansa yang mereka inginkan.
Dalam uji coba origin ini, penyesuaian tersebut dapat dilakukan dengan menggunakan JavaScript untuk mendeteksi apakah pengguna menggunakan Tema Gelap Otomatis, lalu menyesuaikan elemen yang diinginkan.
Mendeteksi Tema Gelap Otomatis
Untuk mendeteksi apakah pengguna menggunakan Tema Gelap Otomatis,
buat elemen dengan background-color
yang disetel ke canvas
dan skema warna disetel ke terang.
Jika warna yang dihitung untuk latar belakang selain putih (rgb(255, 255, 255)
),
Tema Gelap Otomatis akan diterapkan ke halaman.
<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');
}
Menyesuaikan sejumlah besar elemen
Solusi di atas bisa sulit untuk diskalakan jika Anda perlu menyesuaikan lebih banyak elemen. Alternatifnya adalah menggunakan deteksi Tema Gelap Otomatis untuk menambahkan class penanda ke isi halaman:
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);
Kemudian, gunakan CSS untuk menyesuaikan elemen sesuai kebutuhan:
.auto-dark-theme > #my-element {
border-color: red;
}
API penyesuaian per elemen masih dalam pengembangan awal. Kami bekerja sama dengan tim standar untuk menyediakan API yang lebih ekspresif bagi developer untuk memilih tidak ikut. Anda dapat mengikuti percakapan tentang masalah GitHub ini.
Cara menonaktifkan Tema Gelap Otomatis
Selain menghormati pilihan pengguna di perangkat mereka, tema gelap memberikan manfaat bagi pengguna seperti peningkatan masa pakai baterai dan aksesibilitas. Daripada menonaktifkan Tema Gelap Otomatis, sebaiknya Anda menerapkan tema gelap pilihan Anda sendiri, untuk menghormati preferensi pengguna dan mempertahankan manfaat tersebut.
Namun, jika tidak memungkinkan untuk menerapkan tema gelap Anda sendiri, dan hasil yang dihasilkan oleh Tema Gelap Otomatis tidak memuaskan, Anda dapat memilih untuk tidak menggunakan fitur ini.
Menggunakan tag meta
Alternatif pertama untuk menonaktifkan Tema Gelap Otomatis adalah dengan menambahkan tag meta berikut ke header halaman Anda. Keuntungan menggunakan tag meta adalah mencegah Tema Gelap Otomatis diterapkan sama sekali, yang dapat menyebabkan "flash konten yang digelapkan".
<head>
<meta name="color-scheme" content="only light">
...
</head>
Ketidakikutsertaan per elemen
Alternatif kedua untuk memilih tidak ikut adalah menyetel nilai properti CSS color-scheme
ke only light
.
Meskipun ketidakikutsertaan per elemen dapat digunakan untuk mengecualikan seluruh halaman dari Mode Gelap Otomatis,
keuntungan dari pendekatan ini adalah metode ini hanya memungkinkan penonaktifan bagian tertentu dari halaman:
#my-element {
color-scheme: only light;
}
Anda masih dapat menggunakan pendekatan ini untuk mengecualikan seluruh halaman dari Tema Gelap Otomatis dengan menetapkan skema warna pada elemen :root
:
:root {
color-scheme: only light;
}
Kirim masukan kepada kami.
Tema Gelap Otomatis masih ditentukan, dan kami mengharapkan masukan di semua area penerapan: mulai dari hasil algoritma penggelapan hingga API developer untuk penyesuaian elemen dan ketidakikutsertaan.
Ada banyak channel yang dapat Anda kirimkan masukannya kepada kami:
- Melalui survei developer.
- Mengajukan bug pada project Chromium.
- Melalui formulir masukan Uji Coba Origin.
Foto oleh Félix Besombes.