Tema Gelap Otomatis

André Cipriani Bandarra

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 menggunakan tema gelap di sistem operasi. Pengguna dapat memilih untuk tidak menggunakan tema gelap dengan menonaktifkan opsi tersebut di tingkat OS atau di setelan tertentu di Chrome.

Daftar untuk uji coba origin

Anda juga dapat mengaktifkan algoritma penggelapan untuk pengguna, melalui uji coba origin. Dengan begitu, Anda dapat menguji performa Tema Gelap Otomatis terkait KPI Anda.

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:

  1. Klik menu tiga titik.
  2. Pilih Alat Lainnya lalu Rendering.
  3. Pilih Aktifkan pada opsi Emulasikan mode gelap otomatis.

Di ponsel Android

Untuk menguji Tema Gelap Otomatis di ponsel Android:

  1. Buka chrome://flags dan aktifkan eksperimen #darken-websites-checkbox-in-theme-setting.
  2. Lalu, ketuk menu tiga titik, pilih Setelan, lalu Tema, dan centang kotak Terapkan Tema gelap ke situs, jika memungkinkan.

Sekarang, halaman terang akan digelapkan di ponsel.

Penyesuaian per elemen

Meskipun kami menargetkan Tema Gelap Otomatis untuk memberikan hasil yang baik dalam semua kasus, percakapan awal dengan pengembang menyarankan bahwa mereka ingin menyesuaikan elemen tertentu, untuk 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 berada dalam 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 disetel ke canvas dan skema warna disetel ke terang. Jika warna latar belakang yang dikomputasi selain putih (rgb(255, 255, 255)), maka Tema Gelap Otomatis akan diterapkan ke laman.

<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 mungkin sulit diskalakan jika Anda perlu menyesuaikan jumlah elemen yang lebih besar. 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 memberi developer API yang lebih ekspresif untuk tidak menggunakan layanan ini. Anda dapat mengikuti percakapan tentang masalah GitHub ini.

Cara memilih untuk menonaktifkan Tema Gelap Otomatis

Selain menghormati pilihan pengguna di perangkatnya, tema gelap memberikan manfaat kepada pengguna seperti peningkatan daya tahan baterai dan aksesibilitas. Alih-alih menonaktifkan Tema Gelap Otomatis, sebaiknya terapkan tema gelap pilihan Anda sendiri, untuk menghormati preferensi pengguna dan mempertahankan manfaat tersebut.

Namun, dalam kasus di mana tema gelap Anda tidak memungkinkan, dan hasil yang dihasilkan oleh Tema Gelap Otomatis tidak memuaskan, Anda dapat memilih untuk tidak menggunakan fitur tersebut,

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 "kilasan konten yang gelap".

<head>
  <meta name="color-scheme" content="only light">
  ...
</head>

Pilihan tidak ikut per elemen

Alternatif kedua untuk memilih tidak ikut adalah menetapkan nilai color-scheme Properti CSS ke only light. Meskipun opsi penonaktifan per elemen dapat digunakan untuk menyisihkan seluruh halaman dari Mode Gelap Otomatis, keuntungan dari pendekatan ini adalah bahwa cara ini hanya memungkinkan untuk mengecualikan bagian tertentu dari halaman:

#my-element {
  color-scheme: only light;
}

Anda masih dapat menggunakan pendekatan ini untuk menonaktifkan seluruh halaman dari Tema Gelap Otomatis dengan menetapkan skema warna pada elemen :root:

:root {
  color-scheme: only light;
}

Kirimi kami masukan!

Tema Gelap Otomatis masih ditentukan, dan kami mengharapkan masukan untuk semua area penerapan: dari hasil algoritma penggelapan ke API developer untuk penyesuaian elemen dan pilihan tidak ikut serta.

Ada banyak channel yang dapat Anda gunakan untuk mengirimkan masukan kepada kami:

Foto oleh Félix Besombes.