Google Chrome Kini Mendukung Preferensi Mode Gelap
Google mengumumkan dukungan untuk kueri media skema warna pilihan. Ini berarti Chrome akan menampilkan halaman web dengan skema warna mode gelap jika pengguna menunjukkan preferensi untuk mode gelap. Perubahan ini dimulai di Chrome 76.
Dimulai dengan Chrome 76, pengembang web sekarang dapat menampilkan versi mode gelap kepada pengunjung Chrome jika pengguna menetapkannya sebagai preferensi tampilan default.
Mode Gelap adalah Sebuah Peluang
Mode gelap memungkinkan pengguna untuk menjelajahi situs Anda dalam pengaturan gelap. Membuat versi mode gelap dari situs Anda memungkinkan Anda untuk menyediakan konten Anda kepada para pengguna dengan cara yang mengakomodasi mereka. Hal ini bagus untuk penerbit karena akan membuat pengguna senang dan berada di situs Anda lebih lama.
Beberapa templat forum dan tema WordPress dilengkapi dengan lembar gaya alternatif mode gelap. Tetapi Anda mungkin ingin memperbaruinya sehingga dioptimalkan untuk keterbacaan.
CSS-Tricks.com memiliki sebuah artikel yang mencantumkan beberapa penyesuaian yang mungkin ingin Anda pertimbangkan. Sebagai contoh, ada cara untuk membuat gambar menjadi lebih gelap dengan CSS sehingga gambar tersebut tampil lebih baik dalam mode gelap.
Mode Gelap dan Aksesibilitas
Mode gelap mengatasi masalah aksesibilitas. Beberapa orang dengan gangguan penglihatan lebih mudah menjelajahi halaman web dalam mode gelap. Yang lain menggunakan mode gelap karena mengurangi ketegangan mata.
Preferensi Mode Gelap Kompatibilitas Browser
Menurut halaman pengembang Mozilla tentang kompatibilitas browser untuk kueri media preferences-color-scheme, banyak browser utama sekarang mendukung mode gelap.
Desktop
Chrome 76
Firefox 67
Safari 12.1.
Seluler
Tampilan Web Android 76
Chrome untuk Android 76
Firefox untuk Android 67
Safari di iOS 13
Microsoft Edge dan Explorer plus Opera saat ini tidak mendukung mode gelap untuk desktop. Opera untuk Android tidak mendukung mode gelap untuk perangkat seluler Android.
Menurut Google:
“Banyak sistem operasi sekarang mendukung mode gelap, atau tema gelap.
Kueri media prefers-color-scheme, memungkinkan Anda untuk menyesuaikan tampilan dan nuansa situs Anda agar sesuai dengan mode pilihan pengguna.
@media (prefers-color-scheme: dark) {
body {
warna-background: hitam;
warna: putih;
}
}”
Halaman Desain Material Google
Google memiliki halaman Desain Material yang membahas prinsip-prinsip mendesain untuk mode gelap. Di dalamnya mereka menyarankan:
“Tema gelap Desain Material ditentukan oleh properti berikut ini:
Kontras: Permukaan gelap dan teks tubuh 100% putih memiliki tingkat kontras minimal 15,8:1
Kedalaman: Pada tingkat ketinggian yang lebih tinggi, komponen mengekspresikan kedalaman dengan menampilkan warna permukaan yang lebih terang
Desaturasi: Warna primer didesaturasi sehingga memenuhi standar AA Pedoman Aksesibilitas Konten Web (WCAG) minimal 4,5:1 (bila digunakan dengan teks tubuh) di semua tingkat ketinggian
Warna terbatas: Permukaan yang besar menggunakan warna permukaan yang gelap, dengan aksen warna yang terbatas (warna terang, desaturasi, dan cerah, warna jenuh)”
Seperti yang bisa Anda lihat, tema mode gelap lebih dari sekadar membalikkan warna, mengubah hitam menjadi putih dan putih menjadi hitam. Anda mungkin harus memilih kontras yang tidak terlalu mencolok untuk keterbacaan teks.
Haruskah Anda Beralih ke Mode Gelap?
Ada banyak alasan untuk menambahkan versi mode gelap pada situs Anda. Mengizinkan pengguna untuk melihat situs Anda dalam mode gelap tidak hanya bagus untuk pengguna, tetapi juga bagus untuk situs Anda dan metrik kepuasan pengguna.
Bacaan lebih lanjut:
Baca pengumuman Google Chrome:
https://developers.google.com/web/updates/2019/07/nic76
Halaman Desain Material Google pada Tema Mode Gelap
https://material.io/design/color/dark-theme.html
Halaman Pengembang Mozilla tentang kueri media prefer-color-scheme
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
Artikel tentang pertimbangan saat mendesain ulang untuk mode gelap
https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode