Enam Tingkat Dark Mode (2024)

• Ringkasan 8 tingkat yang secara bertahap memperluas cakupan implementasi dark mode, mulai dari fitur bawaan browser hingga JavaScript media query
• Cara paling sederhana adalah konfigurasi yang 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 bukan hanya pada warna, tetapi juga gambar dan bayangan
• Dimungkinkan membuat switcher yang tidak hanya mengikuti pengaturan sistem pengguna, tetapi menyediakan tiga pilihan Automatic·light·dark, dan tema dapat ditentukan berdasarkan :has() serta elemen meta yang sebenarnya
• Termasuk batasan aksesibilitas di Safari dan pengamatan perilaku prefers-color-scheme saat mencetak, yang menunjukkan bahwa dengan fitur CSS terbaru pun light/dark mode kini jauh lebih mudah dibangun

---

Implementasi dark mode per tingkat

• Level 1: Barebone

  • Bahkan tanpa satu baris CSS pun, pembedaan light/dark dapat 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 makna; pengguna yang tidak menetapkan preferensi skema warna akan menerima nilai pertama dalam daftar yang dipisahkan spasi
  • Saat ini tidak ada opsi di pengaturan sistem operasi untuk tidak memilih skema warna, jadi dalam praktiknya hasilnya akan mengikuti skema yang sesuai dengan pengaturan sistem operasi
  • Anda juga bisa menetapkan satu nilai saja pada content; dalam hal ini skema tersebut diterapkan secara paksa tanpa mempertimbangkan preferensi pengguna
  • Tag meta ini sampai batas tertentu berperan sebagai pendekatan sisi HTML yang berpadanan dengan pendekatan CSS pada tingkat berikutnya

• Level 2: Basic

  • Di CSS, pembedaan mode light/dark bisa diterapkan dengan deklarasi html { color-scheme: light dark; }
  • Jika sudah ada tag meta di DOM, deklarasi ini tidak diperlukan; bila Anda bisa mengendalikan HTML, disarankan memakai tag meta agar browser mengetahui instruksi ini bahkan sebelum parsing CSS
  • Kedua cara tersebut memungkinkan pemanfaatan style bawaan user agent beserta mode light/dark yang termasuk di dalamnya
  • Jika CSS ditambahkan di sini tetapi dibatasi terutama pada penggunaan CSS system colors, desain yang cukup rapi tetap bisa diwujudkan
  • Berbeda dengan tag meta yang selalu berlaku untuk seluruh dokumen, deklarasi CSS color-scheme juga bisa diatur di lokasi selain elemen root, dan perbedaan ini membuka ruang pemanfaatan tambahan

• Level 3: Benign

  • Penyesuaian light/dark mode sederhana dapat dilakukan dengan fungsi warna light-dark() di CSS yang ditambahkan relatif baru
  • Dalam contoh, penggunaannya seperti background-color: light-dark(black, white); dan color: light-dark(white, black);; argumen pertama berlaku untuk mode light dan argumen kedua untuk mode dark
  • Argumen dapat berupa warna langsung maupun custom properties yang dapat diinterpretasikan sebagai warna
  • Di seluruh artikel ini, hanya tingkat ini yang pada saat penulisan masih belum memiliki dukungan browser yang 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 box shadow dengan outline, semuanya dimungkinkan

• Level 5: Bisectional

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

• Level 6: Ballistic

  • Di JavaScript, media query skema warna dapat digunakan melalui window.matchMedia('(prefers-color-scheme:dark)')
  • Dengan menanyakan apakah skema yang aktif adalah light atau dark seperti pada media query lain, lalu menggunakan hasilnya sebagai dasar, Anda bisa melakukan penanganan apa pun yang diinginkan
  • Dalam implementasi nyata, teknik-teknik dari tingkat sebelumnya tidak harus dipakai secara tunggal dan dapat dikombinasikan

Switcher pengguna dan pola lanjutan

• Level 7: Beyond

  • Tidak harus hanya bergantung pada preferensi sistem pengguna; dimungkinkan membangun color scheme switcher
  • Switcher ini bukan boolean sederhana; diperlukan mode Automatic sebagai nilai awal default yang mengikuti prefers-color-scheme
  • Setelah switcher ditambahkan, pengguna dapat memilih salah satu dari tiga mode: Automatic, light, atau dark

• Level 8: Beguiling

  • Saat mengimplementasikan switcher Level 7, lazimnya digunakan cara seperti menambahkan kelas .dark atau atribut data-theme="dark" pada elemen HTML
  • Sebagai gantinya, :has() dapat dipakai untuk langsung menanyakan ada tidaknya <meta name="color-scheme" content="dark"> yang nyata
  • 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 sebenarnya tanpa perlu kelas atau atribut data terpisah

Diskusi tambahan dan pengamatan

• Pengamatan CSS Naked Day

  • Setelah style dihapus, hampir semua situs yang dikunjungi tampak tidak memiliki dark mode, dan hal ini mengarah pada pembagian tingkat dark mode tersebut
  • Disebutkan bahwa saat membangun situs baru dari nol dan menulis style baru, fitur CSS terbaru membuat light/dark mode bawaan menjadi sangat mudah diwujudkan

• Isu aksesibilitas Safari

  • Disebutkan bahwa sampai waktu yang relatif baru, 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 light yang digunakan
  • Setelah itu tag meta ditambahkan kembali, tetapi disadari bahwa bagi pengguna Safari versi lama dapat timbul penurunan aksesibilitas
  • Juga dipastikan bahwa di dark mode Safari, kotak teks tidak memiliki batas yang terlihat
  • Karena style bawaan user agent saja tidak dapat menjamin aksesibilitas penuh meskipun memakai HTML semantik yang benar, dipertimbangkan cara mempertahankan style yang cukup bahkan pada CSS Naked Day mendatang

• Pencetakan dan kondisi screen and

  • Alasan penggunaan screen and ... pada contoh Bisectional adalah niat untuk mengecualikan printer
  • Diasumsikan ada stylesheet inti yang tidak bergantung tema atau stylesheet cetak khusus yang terpisah, dan diputuskan untuk memisahkan dark mode dengan aman karena pada printer dark mode bisa menghabiskan lebih banyak tinta
  • Dalam pengujian nyata, meskipun sistem berada dalam dark mode saat mencetak, hasil yang keluar tetap hanya teks hitam di atas kertas putih, sehingga diamati bahwa browser tidak menerapkan style dark mode tersebut saat mencetak
  • Dalam pengujian tambahan, pada print preview prefers-color-scheme selalu dilaporkan sebagai light, dan hal ini dikonfirmasi di Firefox maupun Chromium
  • Disertakan pula candaan bahwa akan menyenangkan jika 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