Berlebihan atau kebutuhan? Pelajari semua hal tentang mode gelap dan cara mendukungnya untuk memberikan manfaat bagi pengguna Anda.
Pengantar
Mode gelap sebelum Mode Gelap
Kita telah membahas mode gelap secara menyeluruh. Pada awal kemunculan komputasi pribadi, mode gelap bukanlah sebuah pilihan, melainkan sebuah fakta: Monitor komputer CRT monokrom bekerja dengan menembakkan berkas elektron pada layar berpendar dan fosfor yang digunakan pada CRT awal berwarna hijau. Karena teks ditampilkan dalam warna hijau dan bagian layar lainnya berwarna hitam, model ini sering disebut sebagai layar hijau.
CRT Warna yang diperkenalkan kemudian menampilkan beberapa warna melalui penggunaan fosfor merah, hijau, dan biru. Mereka menciptakan warna putih dengan mengaktifkan ketiga fosfor secara bersamaan. Dengan munculnya publikasi desktop WYSIWYG yang lebih canggih, ide untuk membuat dokumen virtual menyerupai lembaran kertas fisik menjadi populer.
Di sinilah tren desain gelap di atas putih dimulai, dan tren ini terbawa ke web berbasis dokumen awal. Browser pertama, WorldWideWeb (ingat, CSS bahkan belum ditemukan), menampilkan halaman web dengan cara ini. Fakta menarik: browser kedua yang pernah ada, Line Mode Browser—browser berbasis terminal—berwarna hijau di latar belakang gelap. Saat ini, halaman web dan aplikasi web biasanya didesain dengan teks gelap pada latar belakang terang, asumsi dasar yang juga di-hard code dalam stylesheet agen pengguna, termasuk Chrome.
Masa-masa CRT sudah lama berlalu. Konsumsi dan pembuatan konten telah beralih ke perangkat seluler yang menggunakan layar LCD dengan cahaya latar atau layar AMOLED hemat energi. Komputer, tablet, dan smartphone yang lebih kecil dan lebih mudah dibawa memunculkan pola penggunaan baru. Tugas santai seperti menjelajahi web, coding untuk bersenang-senang, dan bermain game kelas atas sering kali dilakukan setelah jam kerja di lingkungan yang redup. Orang-orang bahkan menikmati perangkat mereka di tempat tidur pada malam hari. Makin banyak orang menggunakan perangkat mereka dalam kegelapan, makin populer ide untuk kembali ke akar terang-di-gelap.
Alasan menggunakan mode gelap
Mode gelap untuk alasan estetika
Saat orang ditanya mengapa mereka menyukai atau menginginkan mode gelap, respons paling populer adalah "lebih nyaman di mata", diikuti dengan "elegan dan indah". Apple dalam dokumentasi developer Mode Gelap-nya secara eksplisit menulis: "Pilihan untuk mengaktifkan tampilan terang atau gelap adalah pilihan estetika bagi sebagian besar pengguna, dan mungkin tidak terkait dengan kondisi pencahayaan ruangan."
Mode gelap sebagai alat aksesibilitas
Ada juga orang yang benar-benar membutuhkan mode gelap dan menggunakannya sebagai alat aksesibilitas lain, misalnya, pengguna dengan gangguan penglihatan. Kemunculan paling awal alat aksesibilitas semacam itu yang dapat saya temukan adalah fitur CloseView System 7, yang memiliki tombol untuk Hitam di atas Putih dan Putih di atas Hitam. Meskipun System 7 mendukung warna, antarmuka pengguna default-nya masih hitam-putih.
Implementasi berbasis inversi ini menunjukkan kelemahannya setelah warna diperkenalkan. Riset pengguna oleh Szpiro et al. tentang cara orang dengan gangguan penglihatan mengakses perangkat komputasi menunjukkan bahwa semua pengguna yang diwawancarai tidak menyukai gambar terbalik, tetapi banyak yang lebih menyukai teks terang dengan latar belakang gelap. Apple mengakomodasi preferensi pengguna ini dengan fitur yang disebut Smart Invert, yang membalikkan warna pada layar, kecuali untuk gambar, media, dan beberapa aplikasi yang menggunakan gaya warna gelap.
Bentuk khusus gangguan penglihatan adalah Sindrom Penglihatan Komputer, yang juga dikenal sebagai Kelelahan Mata Digital, yang didefinisikan sebagai "kombinasi masalah mata dan penglihatan yang terkait dengan penggunaan komputer (termasuk desktop, laptop, dan tablet) dan layar elektronik lainnya (misalnya, smartphone dan perangkat baca elektronik)." Telah dikemukakan bahwa penggunaan perangkat elektronik oleh remaja, terutama pada malam hari, menyebabkan peningkatan risiko durasi tidur yang lebih pendek, latensi onset tidur yang lebih lama, dan peningkatan defisiensi tidur. Selain itu, paparan cahaya biru telah banyak dilaporkan terlibat dalam pengaturan ritme sirkadian dan siklus tidur, dan lingkungan cahaya yang tidak teratur dapat menyebabkan kurang tidur, yang mungkin memengaruhi suasana hati dan performa tugas, menurut penelitian oleh Rosenfield. Untuk membatasi efek negatif ini, mengurangi cahaya biru dengan menyesuaikan suhu warna layar melalui fitur seperti Night Shift iOS atau Cahaya Malam Android dapat membantu, serta menghindari cahaya terang atau cahaya tidak teratur secara umum melalui tema gelap atau mode gelap.
Penghematan daya mode gelap di layar AMOLED
Terakhir, mode gelap dikenal dapat menghemat banyak energi di layar AMOLED. Studi kasus Android yang berfokus pada aplikasi Google populer seperti YouTube telah menunjukkan bahwa penghematan daya dapat mencapai 60%. Video di bawah ini memiliki detail selengkapnya tentang studi kasus ini dan penghematan daya per aplikasi.
Mengaktifkan mode gelap di sistem operasi
Setelah membahas latar belakang mengapa mode gelap sangat penting bagi banyak pengguna, mari kita ulas cara Anda dapat mendukungnya.
Sistem operasi yang mendukung mode gelap atau tema gelap biasanya memiliki opsi untuk mengaktifkannya di suatu tempat dalam setelan. Di macOS X, setelan ini ada di bagian General pada preferensi sistem dan disebut Appearance (screenshot), dan di Windows 10, setelan ini ada di bagian Colors dan disebut Choose your color (screenshot). Untuk Android Q, Anda dapat menemukannya di bagian Tampilan sebagai tombol Tema Gelap (screenshot), dan di iOS 13, Anda dapat mengubah Tampilan di bagian Tampilan & Kecerahan pada setelan (screenshot).
Kueri media prefers-color-scheme
Satu teori terakhir sebelum saya melanjutkan.
Kueri media
memungkinkan penulis menguji dan membuat kueri nilai atau fitur agen pengguna atau perangkat layar,
terlepas dari dokumen yang dirender.
Kueri media digunakan dalam aturan @media CSS untuk menerapkan gaya secara bersyarat ke dokumen,
dan dalam berbagai konteks dan bahasa lainnya, seperti HTML dan JavaScript.
Kueri Media Level 5
memperkenalkan fitur media preferensi pengguna, yaitu,
cara bagi situs untuk mendeteksi cara yang disukai pengguna untuk menampilkan konten.
Fitur media prefers-color-scheme
digunakan untuk mendeteksi
apakah pengguna telah meminta halaman untuk menggunakan tema warna terang atau gelap.
Kode ini berfungsi dengan nilai berikut:
light: Menunjukkan bahwa pengguna telah memberi tahu sistem bahwa mereka lebih menyukai halaman yang memiliki tema terang (teks gelap dengan latar belakang terang).dark: Menunjukkan bahwa pengguna telah memberi tahu sistem bahwa mereka lebih menyukai halaman yang memiliki tema gelap (teks terang dengan latar belakang gelap).
Mendukung mode gelap
Mencari tahu apakah mode gelap didukung oleh browser
Karena mode gelap dilaporkan melalui kueri media, Anda dapat dengan mudah memeriksa apakah browser saat ini
mendukung mode gelap dengan memeriksa apakah kueri media prefers-color-scheme cocok.
Perhatikan bahwa saya tidak menyertakan nilai apa pun, tetapi murni memeriksa apakah kueri media saja cocok.
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log('🎉 Dark mode is supported');
}
Pada saat penulisan, prefers-color-scheme didukung di desktop dan seluler (jika tersedia)
oleh Chrome dan Edge mulai versi 76, Firefox mulai versi 67,
dan Safari mulai versi 12.1 di macOS dan mulai versi 13 di iOS.
Untuk semua browser lainnya, Anda dapat memeriksa dokumen Can I use support tables.
Mempelajari preferensi pengguna pada saat permintaan
Header petunjuk klien Sec-CH-Prefers-Color-Scheme
memungkinkan situs mendapatkan preferensi skema warna pengguna secara opsional pada waktu permintaan,
sehingga server dapat menyisipkan CSS yang tepat dan menghindari flash tema warna yang salah.
Mode gelap dalam praktik
Terakhir, mari kita lihat seperti apa tampilan dukungan mode gelap dalam praktiknya. Sama seperti Highlander, dengan mode gelap hanya ada satu: gelap atau terang, tetapi tidak keduanya. Mengapa kami menyebutkan hal ini? Karena fakta ini akan berdampak pada strategi pemuatan. Jangan paksa pengguna mendownload CSS di jalur rendering penting yang ditujukan untuk mode yang saat ini tidak mereka gunakan. Untuk mengoptimalkan kecepatan pemuatan, saya telah membagi CSS untuk aplikasi contoh yang menunjukkan rekomendasi berikut dalam praktiknya menjadi tiga bagian untuk menunda CSS yang tidak penting:
style.cssyang berisi aturan umum yang digunakan secara universal di situs.dark.cssyang hanya berisi aturan yang diperlukan untuk mode gelap.light.cssyang hanya berisi aturan yang diperlukan untuk mode terang.
Strategi pemuatan
Dua yang terakhir, light.css dan dark.css,
dimuat secara bersyarat dengan kueri <link media>.
Awalnya,
tidak semua browser akan mendukung prefers-color-scheme
(dapat dideteksi menggunakan pola di atas),
yang saya tangani secara dinamis dengan memuat file light.css default
melalui elemen <link rel="stylesheet"> yang disisipkan secara bersyarat dalam skrip inline kecil
(terang adalah pilihan arbitrer, saya juga dapat menjadikan gelap sebagai pengalaman penggantian default).
Untuk menghindari flash konten tanpa gaya,
saya menyembunyikan konten halaman hingga light.css dimuat.
<script>
// If `prefers-color-scheme` is not supported, fall back to light mode.
// In this case, light.css will be downloaded with `highest` priority.
if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
document.documentElement.style.display = 'none';
document.head.insertAdjacentHTML(
'beforeend',
'<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
);
}
</script>
<!--
Conditionally either load the light or the dark stylesheet. The matching file
will be downloaded with `highest`, the non-matching file with `lowest`
priority. If the browser doesn't support `prefers-color-scheme`, the media
query is unknown and the files are downloaded with `lowest` priority (but
above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
rel="stylesheet"
href="/light.css"
media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />
Arsitektur stylesheet
Saya memanfaatkan variabel CSS secara maksimal,
sehingga style.css generik saya menjadi, ya, generik,
dan semua penyesuaian mode terang atau gelap terjadi di dua file lainnya, dark.css dan light.css.
Di bawah ini, Anda dapat melihat kutipan gaya sebenarnya, tetapi ini sudah cukup untuk menyampaikan ide secara keseluruhan.
Saya mendeklarasikan dua variabel, --color dan --background-color,
yang pada dasarnya membuat tema dasar gelap-di-terang dan terang-di-gelap.
/* light.css: 👉 dark-on-light */
:root {
--color: rgb(5, 5, 5);
--background-color: rgb(250, 250, 250);
}
/* dark.css: 👉 light-on-dark */
:root {
--color: rgb(250, 250, 250);
--background-color: rgb(5, 5, 5);
}
Di style.css, saya kemudian menggunakan variabel ini dalam aturan body { … }.
Karena ditentukan pada
class semu CSS :root—pemilih
yang dalam HTML mewakili elemen <html>
dan identik dengan pemilih html, kecuali bahwa kekhususannya
lebih tinggi—mereka mengalir ke bawah, yang berguna bagi saya untuk mendeklarasikan variabel CSS global.
/* style.css */
:root {
color-scheme: light dark;
}
body {
color: var(--color);
background-color: var(--background-color);
}
Dalam contoh kode di atas, Anda mungkin akan melihat properti
color-scheme
dengan nilai yang dipisahkan spasi light dark.
Hal ini memberi tahu browser tema warna yang didukung aplikasi saya
dan memungkinkannya mengaktifkan varian khusus stylesheet agen pengguna,
yang berguna, misalnya, untuk memungkinkan browser merender kolom formulir
dengan latar belakang gelap dan teks terang, menyesuaikan scroll bar,
atau mengaktifkan warna sorotan yang sesuai dengan tema.
Detail persis color-scheme ditentukan dalam
Modul Penyesuaian Warna CSS Level 1.
Selebihnya, Anda hanya perlu menentukan variabel CSS
untuk hal-hal yang penting di situs Anda.
Mengatur gaya secara semantik sangat membantu saat menggunakan mode gelap.
Misalnya, daripada --highlight-yellow, pertimbangkan untuk memanggil variabel
--accent-color, karena "kuning" mungkin sebenarnya tidak berwarna kuning dalam mode gelap atau sebaliknya.
Berikut adalah contoh beberapa variabel lain yang saya gunakan dalam contoh saya.
/* dark.css */
:root {
--color: rgb(250, 250, 250);
--background-color: rgb(5, 5, 5);
--link-color: rgb(0, 188, 212);
--main-headline-color: rgb(233, 30, 99);
--accent-background-color: rgb(0, 188, 212);
--accent-color: rgb(5, 5, 5);
}
/* light.css */
:root {
--color: rgb(5, 5, 5);
--background-color: rgb(250, 250, 250);
--link-color: rgb(0, 0, 238);
--main-headline-color: rgb(0, 0, 192);
--accent-background-color: rgb(0, 0, 238);
--accent-color: rgb(250, 250, 250);
}
Contoh lengkap
Dalam demo tersemat berikut, Anda dapat melihat contoh lengkap yang mempraktikkan konsep di atas. Coba aktifkan mode gelap di setelan sistem operasi tertentu dan lihat reaksi halaman.
Memuat dampak
Saat Anda mencoba contoh ini, Anda dapat melihat
alasan saya memuat dark.css dan light.css melalui kueri media.
Coba aktifkan/nonaktifkan mode gelap dan muat ulang halaman:
stylesheet tertentu yang saat ini tidak cocok masih dimuat, tetapi dengan prioritas terendah,
sehingga tidak pernah bersaing dengan resource yang diperlukan oleh situs saat ini.
prefers-color-scheme akan memuat CSS mode gelap dengan prioritas terendah.Bereaksi terhadap perubahan mode gelap
Seperti perubahan kueri media lainnya, perubahan mode gelap dapat di-subscribe melalui JavaScript.
Anda dapat menggunakannya untuk, misalnya, mengubah
favicon
halaman secara dinamis atau mengubah
<meta name="theme-color">
yang menentukan warna kolom URL di Chrome.
Contoh lengkap di atas menunjukkan cara kerjanya.
Untuk melihat perubahan warna tema dan favicon, buka
demo di tab terpisah.
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', (e) => {
const darkModeOn = e.matches;
console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});
Mulai Chromium 93 dan Safari 15, Anda dapat menyesuaikan warna berdasarkan
kueri media dengan atribut media dari elemen warna tema meta. Yang pertama cocok akan dipilih. Misalnya, Anda dapat memiliki satu warna untuk
mode terang dan warna lain untuk mode gelap. Saat artikel ini ditulis, Anda tidak dapat
menentukannya dalam manifes. Lihat masalah GitHub w3c/manifest#975.
<meta
name="theme-color"
media="(prefers-color-scheme: light)"
content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
Men-debug dan menguji mode gelap
Mengemulasikan prefers-color-scheme di DevTools
Mengubah skema warna seluruh sistem operasi dapat mengganggu dengan cepat,
jadi Chrome DevTools kini memungkinkan Anda mengemulasikan skema warna pilihan pengguna
dengan cara yang hanya memengaruhi tab yang saat ini terlihat.
Buka Menu Perintah, mulai ketik Rendering, jalankan perintah Show Rendering, lalu ubah opsi Emulasikan fitur media CSS prefers-color-scheme.
Mengambil screenshot prefers-color-scheme dengan Puppeteer
Puppeteer adalah library Node.js yang menyediakan API tingkat tinggi untuk mengontrol Chrome atau Chromium melalui Protokol DevTools.
Dengan dark-mode-screenshot, kami menyediakan
skrip Puppeteer yang memungkinkan Anda membuat screenshot halaman dalam mode gelap dan terang.
Anda dapat menjalankan skrip ini sebagai skrip sekali pakai, atau menjadikannya bagian dari
suite pengujian Continuous Integration (CI).
npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750
Praktik terbaik mode gelap
Hindari warna putih murni
Detail kecil yang mungkin Anda perhatikan adalah saya tidak menggunakan warna putih murni.
Sebagai gantinya, untuk mencegah cahaya dan pendaran pada konten gelap di sekitarnya,
saya memilih warna putih yang sedikit lebih gelap. Nama seperti rgb(250, 250, 250) cocok digunakan.
Mewarnai ulang dan menggelapkan gambar fotografi
Jika Anda membandingkan dua screenshot di bawah, Anda akan melihat bahwa tidak hanya tema inti yang berubah dari gelap-di-terang menjadi terang-di-gelap, tetapi banner besar juga terlihat sedikit berbeda. Riset pengguna saya menunjukkan bahwa mayoritas orang yang disurvei lebih menyukai gambar yang sedikit kurang cerah dan cemerlang saat mode gelap aktif. Saya menyebutnya sebagai pewarnaan ulang.
Pewarnaan ulang dapat dilakukan melalui filter CSS pada gambar saya.
Saya menggunakan pemilih CSS yang cocok dengan semua gambar yang tidak memiliki .svg di URL-nya,
dengan asumsi bahwa saya dapat memberikan perlakuan pewarnaan ulang yang berbeda pada grafik vektor (ikon)
daripada gambar (foto). Selengkapnya tentang hal ini di paragraf berikutnya.
Perhatikan bahwa saya kembali menggunakan variabel CSS,
sehingga nanti saya dapat mengubah filter secara fleksibel.
Karena pewarnaan ulang hanya diperlukan dalam mode gelap, yaitu saat dark.css aktif,
tidak ada aturan yang sesuai di light.css.
/* dark.css */
--image-filter: grayscale(50%);
img:not([src*='.svg']) {
filter: var(--image-filter);
}
Menyesuaikan intensitas pewarnaan ulang mode gelap dengan JavaScript
Setiap orang berbeda dan memiliki kebutuhan mode gelap yang berbeda.
Dengan tetap menggunakan metode pewarnaan ulang yang dijelaskan di atas,
saya dapat dengan mudah membuat intensitas hitam putih menjadi preferensi pengguna yang dapat saya
ubah melalui JavaScript,
dan dengan menetapkan nilai 0%, saya juga dapat menonaktifkan pewarnaan ulang sepenuhnya.
Perhatikan bahwa document.documentElement
memberikan referensi ke elemen root dokumen,
yaitu elemen yang sama yang dapat saya referensikan dengan
pseudo-class CSS :root.
const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);
Menginversi grafik dan ikon vektor
Untuk grafik vektor—yang dalam kasus saya digunakan sebagai ikon yang saya referensikan melalui elemen <img>—saya
menggunakan metode pewarnaan ulang yang berbeda.
Meskipun riset menunjukkan
bahwa orang tidak menyukai inversi untuk foto, inversi berfungsi sangat baik untuk sebagian besar ikon.
Sekali lagi, saya menggunakan variabel CSS untuk menentukan jumlah inversi
dalam status reguler dan dalam status :hover.
Perhatikan bagaimana saya hanya menginversi ikon di dark.css, tetapi tidak di light.css, dan bagaimana :hover
mendapatkan intensitas inversi yang berbeda dalam dua kasus untuk membuat ikon tampak
sedikit lebih gelap atau sedikit lebih terang, bergantung pada mode yang dipilih pengguna.
/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);
img[src*='.svg'] {
filter: var(--icon-filter);
}
/* light.css */
--icon-filter_hover: invert(60%);
/* style.css */
img[src*='.svg']:hover {
filter: var(--icon-filter_hover);
}
Menggunakan currentColor untuk SVG inline
Untuk gambar SVG inline, alih-alih menggunakan filter inversi,
Anda dapat memanfaatkan kata kunci CSS currentColor
yang mewakili nilai properti color elemen.
Dengan begitu, Anda dapat menggunakan nilai color pada properti yang tidak menerimanya secara default.
Mudahnya, jika currentColor digunakan sebagai nilai atribut fill atau stroke SVG,
nilai tersebut akan diambil dari nilai yang diwarisi dari properti warna.
Lebih baik lagi: hal ini juga berlaku untuk
<svg><use href="…"></svg>,
sehingga Anda dapat memiliki resource terpisah
dan currentColor akan tetap diterapkan dalam konteks.
Perhatikan bahwa ini hanya berfungsi untuk SVG inline atau <use href="…">,
tetapi tidak untuk SVG yang direferensikan sebagai src gambar atau melalui CSS.
Anda dapat melihat penerapannya dalam demo di bawah.
<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
>
[…]
</svg>
Transisi yang lancar antarmode
Peralihan dari mode gelap ke mode terang atau sebaliknya dapat diperhalus karena
color dan background-color adalah
properti CSS yang dapat dianimasikan.
Membuat animasi semudah mendeklarasikan dua transition untuk dua properti.
Contoh di bawah mengilustrasikan ide keseluruhan, Anda dapat mengalaminya secara langsung di
demo.
body {
--duration: 0.5s;
--timing: ease;
color: var(--color);
background-color: var(--background-color);
transition: color var(--duration) var(--timing), background-color var(
--duration
) var(--timing);
}
Pengarahan seni dengan mode gelap
Meskipun untuk alasan performa pemuatan secara umum, sebaiknya gunakan prefers-color-scheme
secara eksklusif di atribut media elemen <link> (bukan inline di stylesheet),
ada situasi saat Anda mungkin ingin menggunakan prefers-color-scheme secara langsung inline dalam kode HTML.
Arahan seni adalah situasi seperti itu.
Di web, arahan seni berkaitan dengan keseluruhan tampilan visual halaman dan cara halaman tersebut berkomunikasi secara visual,
merangsang suasana hati, mengontraskan fitur, dan secara psikologis menarik audiens target.
Dengan mode gelap, desainer dapat memutuskan gambar terbaik pada mode tertentu
dan apakah pewarnaan ulang gambar mungkin tidak cukup baik.
Jika digunakan dengan elemen <picture>, <source> gambar yang akan ditampilkan dapat dibuat bergantung pada atribut media.
Pada contoh di bawah, kami menampilkan belahan bumi Barat untuk mode gelap, dan belahan bumi Timur untuk mode terang
atau jika tidak ada preferensi yang diberikan, secara default akan menampilkan belahan bumi Timur dalam semua kasus lainnya.
Tentu saja, ini hanya untuk tujuan ilustrasi.
Aktifkan mode gelap di perangkat Anda untuk melihat perbedaannya.
<picture>
<source srcset="western.webp" media="(prefers-color-scheme: dark)" />
<source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
<img src="eastern.webp" />
</picture>
Mode gelap, tetapi tambahkan opsi untuk tidak ikut serta
Seperti yang disebutkan di bagian alasan mode gelap di atas,
mode gelap adalah pilihan estetika bagi sebagian besar pengguna.
Akibatnya, beberapa pengguna mungkin sebenarnya ingin UI sistem operasi mereka
dalam mode gelap, tetapi tetap lebih suka melihat halaman web seperti yang biasa mereka lihat.
Pola yang bagus adalah dengan mematuhi sinyal yang dikirim browser melalui
prefers-color-scheme, tetapi kemudian secara opsional mengizinkan pengguna untuk mengganti setelan tingkat sistem mereka.
Elemen kustom <dark-mode-toggle>
Tentu saja, Anda dapat membuat sendiri kode untuk ini, tetapi Anda juga dapat menggunakan
elemen kustom siap pakai (komponen web) yang telah saya buat khusus untuk tujuan ini.
Namanya <dark-mode-toggle>
dan menambahkan tombol (mode gelap: aktif/nonaktif) atau
pengalih tema (tema: terang/gelap) ke halaman Anda yang dapat Anda sesuaikan sepenuhnya.
Demo di bawah menunjukkan elemen yang sedang beraksi
(oh, dan saya juga diam-diam 🤫 menyisipkannya di semua
contoh
lainnya
di atas).
<dark-mode-toggle
legend="Theme Switcher"
appearance="switch"
dark="Dark"
light="Light"
remember="Remember this"
></dark-mode-toggle>
<dark-mode-toggle> dalam mode terang.
<dark-mode-toggle> dalam mode gelap.
Coba klik atau ketuk kontrol mode gelap di pojok kanan atas dalam demo berikut. Jika Anda mencentang kotak di kontrol ketiga dan keempat, lihat bagaimana pilihan mode Anda diingat bahkan saat Anda memuat ulang halaman. Hal ini memungkinkan pengunjung Anda tetap menggunakan mode gelap di sistem operasi mereka, tetapi menikmati situs Anda dalam mode terang atau sebaliknya.
Kesimpulan
Bekerja dengan dan mendukung mode gelap itu menyenangkan dan membuka peluang desain baru.
Bagi beberapa pengunjung, hal ini dapat menjadi perbedaan antara tidak dapat menangani situs Anda
dan menjadi pengguna yang puas.
Ada beberapa kendala dan pengujian yang cermat sangat diperlukan,
tetapi mode gelap adalah peluang bagus bagi Anda untuk menunjukkan bahwa Anda peduli dengan semua pengguna.
Praktik terbaik yang disebutkan dalam postingan ini dan helper seperti
elemen kustom <dark-mode-toggle>
akan membuat Anda yakin dengan kemampuan Anda untuk menciptakan pengalaman mode gelap yang luar biasa.
Beri tahu saya di Twitter tentang apa yang Anda buat dan apakah postingan ini bermanfaat
atau juga saran untuk meningkatkannya.
Terima kasih telah membaca. 🌒
Link terkait
Referensi untuk kueri media prefers-color-scheme:
Referensi untuk tag meta color-scheme dan properti CSS:
- Properti CSS dan tag meta
color-scheme - Halaman Status Platform Chrome
- Bug Chromium
- Spesifikasi CSS Color Adjustment Module Level 1
- Masalah GitHub CSS WG untuk tag meta dan properti CSS
- Masalah GitHub WHATWG HTML untuk tag meta
Link mode gelap umum:
- Desain Material—Tema Gelap
- Mode Gelap di Web Inspector
- Dukungan Mode Gelap di WebKit
- Apple Human Interface Guidelines—Dark Mode
Artikel riset latar belakang untuk postingan ini:
- Apa yang Sebenarnya Dilakukan "supported-color-schemes" Mode Gelap? 🤔
- Let there be darkness! 🌚 Mungkin…
- Pewarnaan Ulang untuk Mode Gelap
Ucapan terima kasih
Fitur media prefers-color-scheme, properti CSS color-scheme,
dan tag meta terkait adalah hasil implementasi dari 👏 Rune Lillesveen.
Rune juga merupakan salah satu editor spesifikasi CSS Color Adjustment Module Level 1.
Saya ingin 🙏 berterima kasih kepada Lukasz Zbylut,
Rowan Merewood,
Chirag Desai,
dan Rob Dodson
atas ulasan menyeluruh mereka terhadap artikel ini.
Strategi pemuatan ini adalah gagasan dari Jake Archibald.
Emilio Cobos Álvarez telah mengarahkan saya ke metode deteksi prefers-color-scheme yang benar.
Tips dengan SVG yang direferensikan dan currentColor berasal dari
Timothy Hatcher.
Terakhir, saya berterima kasih kepada banyak peserta anonim dari berbagai studi pengguna
yang telah membantu membentuk rekomendasi dalam artikel ini.