Enam Tingkat Dark Mode (2024)

• Ringkasan 8 tingkat yang secara bertahap memperluas cakupan implementasi dark mode, dari fitur bawaan browser hingga JavaScript media query
• Cara paling sederhana adalah mengikuti preferensi skema warna pengguna hanya dengan mendeklarasikan <meta name="color-scheme" content="light dark"> atau color-scheme: light dark
• Pada tingkat yang lebih tinggi, fungsi light-dark(), @media (prefers-color-scheme: dark), dan stylesheet terpisah per skema memungkinkan penyesuaian luas tidak hanya pada warna, tetapi juga gambar dan bayangan
• Dimungkinkan membuat pengalih dengan tiga pilihan: Automatic·light·dark, alih-alih hanya mengikuti pengaturan sistem pengguna, dan tema dapat dideteksi berdasarkan :has() serta elemen meta yang sebenarnya
• Termasuk pula keterbatasan aksesibilitas di Safari dan pengamatan perilaku prefers-color-scheme saat mencetak, yang menunjukkan bahwa dengan fitur CSS modern sekalipun, menyematkan mode terang/gelap kini menjadi jauh lebih mudah

---

Implementasi dark mode per tingkat

• Level 1: Barebone

  • Bahkan tanpa satu baris CSS pun, pemisahan light/dark bisa diaktifkan; cukup tambahkan <meta name="color-scheme" content="light dark"> di head dokumen agar browser mulai mengikuti preferensi skema warna pengguna
  • Secara teori urutan item pada atribut content memiliki arti, dan pengguna yang tidak menentukan preferensi skema warna akan menerima nilai pertama dalam daftar yang dipisahkan spasi
  • Karena pengaturan sistem operasi saat ini tidak menyediakan opsi untuk tidak memilih skema warna, pada praktiknya hasilnya akan mengikuti skema yang sesuai dengan pengaturan sistem operasi
  • Anda juga bisa menetapkan hanya satu nilai di content; dalam kasus ini skema tersebut dipaksakan tanpa mempertimbangkan preferensi pengguna
  • Tag meta ini sampai batas tertentu berperan sebagai cara di sisi HTML yang berpadanan dengan pendekatan CSS pada tahap berikutnya

• Level 2: Basic

  • Di CSS, pembedaan mode terang/gelap dapat diterapkan dengan deklarasi html { color-scheme: light dark; }
  • Jika tag meta sudah ada di DOM, deklarasi ini tidak diperlukan; bila Anda dapat mengendalikan HTML, penggunaan tag meta disarankan karena browser dapat mengetahui instruksi tersebut sebelum parsing CSS
  • Kedua cara ini sama-sama memungkinkan penggunaan gaya bawaan user agent beserta mode terang/gelap yang termasuk di dalamnya
  • Jika kemudian CSS ditambahkan namun dibatasi terutama pada penggunaan CSS system colors, desain yang cukup rapi tetap bisa dicapai
  • Berbeda dengan tag meta yang selalu berlaku untuk seluruh dokumen, deklarasi CSS color-scheme juga dapat diterapkan di lokasi selain elemen root, sehingga ada ruang pemanfaatan tambahan dari perbedaan ini

• Level 3: Benign

  • Penyesuaian mode terang/gelap sederhana dapat dilakukan dengan fungsi warna CSS light-dark() yang ditambahkan relatif baru
  • Pada contoh, ini digunakan seperti background-color: light-dark(black, white); dan color: light-dark(white, black);; argumen pertama diterapkan pada mode terang dan argumen kedua pada mode gelap
  • Untuk argumennya, Anda dapat memasukkan warna secara langsung atau custom properties yang ditafsirkan sebagai warna
  • Di seluruh tulisan ini, hanya tingkat ini yang pada saat penulisan dukungan browser-nya belum memadai

• Level 4: Bold

  • Peralihan dark mode dapat diimplementasikan dengan media query tradisional @media (prefers-color-scheme: dark)
  • Baik menanyakan light maupun dark, pendekatan ini memungkinkan kustomisasi tingkat maksimum yang tidak terbatas pada perubahan warna sederhana
  • Penyesuaian seperti membuat gambar menjadi kurang jenuh dengan filter di dark mode, atau mengganti bayangan kotak dengan outline, semuanya dimungkinkan

• Level 5: Bisectional

  • Media query juga dapat digunakan di HTML, dan dimasukkan ke atribut media pada elemen link untuk memisahkan stylesheet per skema
  • Contohnya, light.css dan dark.css masing-masing dihubungkan ke prefers-color-scheme: light dan prefers-color-scheme: dark
  • Jika cakupan kustomisasinya besar, susunan file khusus lebih cocok; browser juga dapat mengabaikan file CSS yang tidak cocok dengan query sehingga jumlah file yang perlu diunduh bisa berkurang satu

• Level 6: Ballistic

  • Di JavaScript, media query skema warna dapat digunakan lewat window.matchMedia('(prefers-color-scheme:dark)')
  • Dengan menanyakan apakah skemanya terang atau gelap seperti media query lainnya, Anda kemudian dapat menjalankan pemrosesan apa pun yang diinginkan berdasarkan hasil tersebut
  • Dalam implementasi nyata, teknik dari tingkat-tingkat sebelumnya tidak harus dipakai secara tunggal, tetapi dapat dikombinasikan

Pengalih pengguna dan pola lanjutan

• Level 7: Beyond

  • Tidak harus hanya bergantung pada preferensi sistem pengguna; Anda dapat membangun color scheme switcher
  • Pengalih ini bukan boolean sederhana, karena perlu ada mode Automatic yang sebagai nilai awal mengikuti prefers-color-scheme
  • Dengan pengalih di atasnya, pengguna dapat memilih salah satu dari tiga mode: Automatic, light, atau dark

• Level 8: Beguiling

  • Saat mengimplementasikan pengalih Level 7, cara yang umum adalah menambahkan kelas seperti .dark atau atribut seperti data-theme="dark" pada elemen HTML
  • Sebagai gantinya, Anda dapat memakai :has() untuk langsung menguji keberadaan <meta name="color-scheme" content="dark"> yang sebenarnya
  • Dalam contoh, di bawah selektor html:has(meta[name="color-scheme"][content="dark"]), variabel CSS seperti --color-bg dan --color-text diatur ke nilai dark mode
  • Dengan begitu, tema dapat ditentukan berdasarkan elemen meta yang sesungguhnya tanpa kelas atau atribut data terpisah

Diskusi dan pengamatan tambahan

• Pengamatan CSS Naked Day

  • Setelah gaya dihapus, hampir semua situs yang dikunjungi tampak tidak memiliki dark mode, dan dari situ lahir pembedaan tingkat dark mode ini
  • Disebutkan pula bahwa saat membangun situs baru dari nol dan menulis gaya baru, fitur CSS terbaru membuat mode terang/gelap bawaan menjadi sangat mudah diwujudkan

• Isu aksesibilitas Safari

  • Disebutkan bahwa hingga relatif belum lama ini Safari tidak menyediakan warna tautan yang aksesibel di dark mode
  • Pada CSS Naked Day sebelumnya, masalah ini ditemukan lalu tag meta dihapus dan hanya skema warna terang yang digunakan
  • Setelah itu tag meta ditambahkan kembali, tetapi disadari bahwa bagi pengguna Safari versi lama dapat terjadi penurunan aksesibilitas
  • Juga dikonfirmasi bahwa di dark mode Safari, kotak teks tidak memiliki batas yang terlihat
  • Karena hanya mengandalkan gaya user agent tidak menjamin aksesibilitas penuh meskipun HTML semantik yang benar digunakan, dipertimbangkan bagaimana tetap mempertahankan gaya yang cukup pada CSS Naked Day mendatang

• Pencetakan dan kondisi screen and

  • Disebutkan bahwa alasan penggunaan screen and ... pada contoh Bisectional adalah untuk mengecualikan target printer
  • Dengan asumsi ada stylesheet inti yang tidak bergantung pada tema atau stylesheet cetak khusus, diputuskan untuk memisahkannya demi aman karena dark mode pada printer bisa menghabiskan lebih banyak tinta
  • Dalam pengujian nyata, meskipun sistem berada dalam dark mode saat mencetak, hasil yang keluar tetap teks hitam di atas kertas putih; diamati bahwa browser tidak menerapkan gaya dark mode tersebut saat pencetakan
  • Dalam pengujian tambahan, pada pratinjau cetak prefers-color-scheme selalu dilaporkan sebagai light; ini dikonfirmasi di Firefox dan Chromium
  • Termasuk pula selipan candaan bahwa akan sayang sekali bila ada printer yang menggunakan kertas hitam dan tinta putih

[GN⁺]

Komentar Hacker News

• Jika banyak melakukan kustomisasi, file khusus memang masuk akal, tetapi penjelasan bahwa CSS yang tidak cocok dengan media query bahkan tidak akan diunduh menurut saya berbeda dari perilaku browser yang sebenarnya. Dari pengalaman saya, browser pada akhirnya mengunduh semuanya, hanya memberi prioritas yang berbeda
• Saya penasaran apakah masih belum ada cara untuk mencegah kilatan seperti flashbang yang muncul saat menunggu konten awal dari server
  • Menurut saya, cara menentukan background-color di userContent.css milik Firefox cukup baik
  • Saya cukup menurunkan kecerahan layar dan mematikan dark mode, lalu flashbang itu hilang. Bonusnya, baterai juga jadi lebih awet
• Saya kira tulisan ini akan membahas preferensi soal tingkat kepekatan hitam pada latar dark mode. Saya juga pernah dengar bahwa hitam murni lebih hemat baterai di OLED, dan saya juga tahu ada orang yang lebih suka abu-abu yang tidak sehitam hitam penuh. Meski begitu, saya tidak yakin perlu sampai enam tingkat; menurut saya yang benar-benar terasa paling banyak sekitar 3~4 tingkat
  • Saya pikir solusi yang lebih umum adalah standarisasi kompatibilitas Reader Mode. Daripada setiap situs harus memenuhi selera semua pengguna sebagai masalah n x m, menurut saya lebih baik situs cukup mendukung satu tampilan konten sederhana dan browser yang menangani pengaturan tiap pengguna di atasnya
  • Di OLED, saya cenderung menyukai hitam murni. Saya merasa semakin sedikit piksel yang menyala, semakin kecil beban burn-in, dan karena umur pakainya memang terbatas, dalam jangka panjang saya ingin memakai monitor lebih dari 5 tahun ketimbang 2~3 tahun
• Menurut saya level terbaik itu 9, atau 0, yaitu mematikan komputer lalu pergi tidur
• Saya senang OP mengimplementasikan toggle 3 status dengan benar
• Saya pikir akan lebih seru kalau tingkatnya diterapkan secara dinamis saat menggulir ke bawah
  • Atau pembaca juga bisa diberi pilihan untuk memilih tingkat sendiri di posisi-posisi tertentu pada halaman
• Menurut saya ini bukannya 8 tingkat?
• Rasanya benar-benar terasa kalau sekarang ini tahun 2024
• Yang langsung teringat dalam situasi ini tentu xkcd 3227