Terlalu berlebihan atau kebutuhan? Pelajari segala hal tentang mode gelap dan cara mendukungnya demi kepentingan pengguna Anda.
Pengantar
Mode gelap sebelum Mode Gelap
![Monitor komputer layar hijau](https://web.dev/static/articles/prefers-color-scheme/image/green-screen-computer-mon-01027d880d7ee.jpg?authuser=6&hl=id)
Mode gelap kini telah sepenuhnya digunakan. Pada awal komputasi pribadi, mode gelap bukanlah masalah pilihan, tetapi faktanya: Monitor komputer CRT monokrom bekerja dengan menembakkan berkas elektron pada layar fosfor dan fosfor yang digunakan dalam CRT awal berwarna hijau. Karena teks ditampilkan dengan warna hijau dan sisa layar berwarna hitam, model ini sering disebut sebagai layar hijau.
![Pemrosesan kata gelap di atas putih](https://web.dev/static/articles/prefers-color-scheme/image/dark-white-word-processi-c815d99e74013.jpg?authuser=6&hl=id)
CRT Warna yang diperkenalkan selanjutnya menampilkan beberapa warna melalui penggunaan fosfor merah, hijau, dan biru. Mereka membuat warna putih dengan mengaktifkan ketiga fosfor secara bersamaan. Dengan munculnya publikasi desktop WYSIWYG yang lebih canggih, ide membuat dokumen virtual menyerupai selembar kertas fisik menjadi populer.
![Halaman web berwarna gelap di atas putih di browser WorldWideWeb](https://web.dev/static/articles/prefers-color-scheme/image/dark-white-webpage-the-b32b5ae575bbe.png?authuser=6&hl=id)
Di sinilah tren desain gelap-putih dimulai, dan tren ini dibawa 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, Browser Mode Baris—browser berbasis terminal—berwarna hijau di gelap. Saat ini, halaman web dan aplikasi web biasanya didesain dengan teks gelap dengan latar belakang terang, asumsi dasar yang juga disertakan dalam stylesheet agen pengguna, termasuk Chrome.
![Smartphone digunakan saat berbaring di tempat tidur](https://web.dev/static/articles/prefers-color-scheme/image/smartphone-used-while-lyi-d0cbc01823ee4.jpg?authuser=6&hl=id)
Masa berlaku CRT telah lama berlalu. Konsumsi dan pembuatan konten telah beralih ke perangkat seluler yang menggunakan lampu latar LCD atau layar AMOLED hemat energi. Komputer, tablet, dan smartphone yang lebih kecil dan lebih mudah dipindahkan menyebabkan pola penggunaan baru. Tugas rekreasi seperti penjelajahan web, coding untuk bersenang-senang, dan game kelas atas sering terjadi setelah jam kerja di lingkungan yang redup. Orang-orang bahkan menikmati perangkat mereka di tempat tidur pada malam hari. Semakin banyak orang menggunakan perangkat mereka dalam gelap, semakin populer ide untuk kembali ke akar cahaya dalam gelap.
Mengapa mode gelap
Mode gelap untuk alasan estetika
Saat orang ditanya mengapa mereka menyukai atau menginginkan mode gelap, respons yang paling populer adalah "lebih nyaman di mata", diikuti dengan "tampilannya elegan dan indah". Apple dalam dokumentasi developer Mode Gelap secara eksplisit menulis: "Pilihan apakah akan mengaktifkan tampilan terang atau gelap adalah pilihan yang estetik bagi sebagian besar pengguna, dan mungkin tidak terkait dengan kondisi pencahayaan sekitar".
![CloseView di Mac OS System 7 dengan](https://web.dev/static/articles/prefers-color-scheme/image/closeview-mac-os-system-d5554c867b6af.png?authuser=6&hl=id)
Mode gelap sebagai alat aksesibilitas
Ada juga orang-orang yang benar-benar memerlukan mode gelap dan menggunakannya sebagai alat aksesibilitas lainnya, misalnya, pengguna dengan gangguan penglihatan. Kejadian paling awal dari alat aksesibilitas yang dapat saya temukan adalah fitur CloseView System 7, yang memiliki tombol untuk Black on White dan White on Black. Meskipun Sistem 7 mendukung warna, antarmuka pengguna default masih tetap hitam putih.
Implementasi berbasis inversi ini mendemonstrasikan kelemahannya setelah warna diperkenalkan. Riset pengguna yang dilakukan Szpiro et al. tentang bagaimana orang dengan perangkat komputasi akses terbatas 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 gambar, media, dan beberapa aplikasi yang menggunakan gaya warna gelap.
Bentuk khusus gangguan penglihatan adalah Computer Vision Syndrome, yang juga dikenal sebagai Digital Eye Strain, 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 membaca elektronik)." Telah diusulkan 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 kurang tidur. Selain itu, paparan cahaya biru telah banyak dilaporkan terlibat dalam regulasi ritme sirkadian dan siklus tidur, dan lingkungan cahaya yang tidak teratur dapat menyebabkan kurang tidur, yang mungkin memengaruhi suasana hati dan performa tugas, menurut riset oleh Rosenfield. Untuk membatasi efek negatif ini, kurangi cahaya biru dengan menyesuaikan suhu warna layar melalui fitur seperti Night Shift di iOS atau Night Light 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 diketahui dapat menghemat banyak energi pada layar AMOLED. Studi kasus Android yang berfokus pada aplikasi Google populer seperti YouTube menunjukkan bahwa penghematan daya dapat mencapai 60%. Video di bawah ini berisi detail selengkapnya tentang studi kasus ini dan penghematan daya per aplikasi.
Mengaktifkan mode gelap pada sistem operasi
Setelah saya membahas latar belakang alasan mode gelap sangat penting bagi banyak pengguna, mari kita tinjau cara mendukungnya.
![Setelan mode gelap Android Q](https://web.dev/static/articles/prefers-color-scheme/image/android-q-dark-mode-setti-43e0e230e78da.png?authuser=6&hl=id)
Sistem operasi yang mendukung mode gelap atau tema gelap biasanya memiliki opsi untuk mengaktifkannya di suatu tempat di setelan. Di macOS X, letaknya di bagian General preferensi sistem dan disebut Appearance (screenshot), dan di Windows 10, berada di bagian Colors dan disebut Choose your color (screenshot). Untuk Android Q, Anda dapat menemukannya di bagian Display sebagai tombol beralih Dark Theme (screenshot), dan di iOS 13, Anda dapat mengubah Appearance di bagian Display & Brightness pada setelan (screenshot).
Kueri media prefers-color-scheme
Satu bagian terakhir dari teori
sebelum saya melanjutkan.
Kueri media memungkinkan penulis menguji dan mengkueri nilai atau fitur agen pengguna atau perangkat tampilan, terlepas dari dokumen yang dirender.
Gaya tersebut digunakan dalam aturan @media
CSS untuk menerapkan gaya secara bersyarat ke dokumen, serta dalam berbagai konteks dan bahasa lain, seperti HTML dan JavaScript.
Kueri Media Level 5
memperkenalkan apa yang disebut fitur media preferensi pengguna, yaitu
cara bagi situs untuk mendeteksi cara pilihan 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 memilih halaman yang memiliki tema terang (teks gelap dengan latar belakang terang).dark
: Menunjukkan bahwa pengguna telah memberi tahu sistem bahwa mereka lebih memilih 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 prefers-color-scheme
kueri media cocok sama sekali.
Perhatikan bahwa saya tidak menyertakan nilai apa pun, namun hanya periksa apakah kueri media saja yang cocok.
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log('🎉 Dark mode is supported');
}
Pada saat dokumen ini ditulis, prefers-color-scheme
didukung di desktop dan perangkat seluler (jika tersedia)
oleh Chrome dan Edge mulai versi 76, Firefox mulai versi 67,
dan Safari pada versi 12.1 di macOS, dan versi 13 di iOS.
Untuk semua browser lainnya, Anda dapat memeriksa Dapatkah saya menggunakan tabel dukungan.
Mempelajari preferensi pengguna pada waktu 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 secara inline sehingga menghindari flash tema warna yang salah.
Mode gelap dalam praktik
Akhirnya mari kita lihat bagaimana penerapan mode gelap mendukung. Sama seperti Highlander, dengan mode gelap hanya boleh ada satu: gelap atau terang, tetapi tidak bisa keduanya. Mengapa saya menyebutkan ini? Karena fakta ini akan berdampak pada strategi pemuatan. Jangan paksa pengguna untuk mendownload CSS di jalur rendering penting yang ditujukan untuk mode yang saat ini tidak mereka gunakan. Untuk mengoptimalkan kecepatan pemuatan, saya membagi CSS untuk aplikasi contoh yang menampilkan praktik rekomendasi berikut menjadi tiga bagian untuk menunda CSS yang tidak penting:
style.css
yang berisi aturan umum yang digunakan secara universal di situs.dark.css
yang hanya berisi aturan yang diperlukan untuk mode gelap.light.css
yang hanya berisi aturan yang diperlukan untuk mode terang.
Strategi pemuatan
Dua kueri yang terakhir, light.css
dan dark.css
,
dimuat secara bersyarat dengan kueri <link media>
.
Awalnya,
tidak semua browser akan mendukung prefers-color-scheme
(dapat terdeteksi 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 yang sangat kecil
(terang adalah pilihan arbitrer, saya juga bisa menjadikan pengalaman penggantian default menjadi gelap).
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 memaksimalkan variabel CSS,
hal ini memungkinkan style.css
generik saya menjadi, yah, 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 yang sebenarnya, tetapi kutipan tersebut seharusnya sudah cukup untuk menyampaikan ide secara keseluruhan.
Saya mendeklarasikan dua variabel, --color
dan --background-color
yang pada dasarnya membuat tema dasar pengukuran gelap-menyala dan terang-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 menggunakan variabel ini dalam aturan body { … }
.
Seperti yang ditentukan pada
class semu CSS :root
,
pemilih yang di HTML mewakili elemen <html>
dan identik dengan pemilih html
, hanya saja kekhususannya
lebih tinggi, keduanya menurun ke bawah, yang berfungsi 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 telah melihat properti
color-scheme
dengan nilai yang dipisahkan spasi light dark
.
Hal ini memberi tahu browser tema warna mana yang didukung aplikasi saya
dan memungkinkannya mengaktifkan varian khusus stylesheet agen pengguna
yang berguna untuk, misalnya, membiarkan browser merender kolom formulir
dengan latar belakang gelap dan teks terang, menyesuaikan scroll bar,
atau mengaktifkan warna sorotan berdasarkan tema.
Detail persis color-scheme
ditentukan dalam
Modul Penyesuaian Warna CSS Level 1.
Hal lainnya hanyalah masalah menentukan variabel CSS
untuk hal-hal yang penting di situs saya.
Mengatur gaya secara semantik sangat membantu saat bekerja dengan mode gelap.
Misalnya, daripada --highlight-yellow
, pertimbangkan untuk memanggil variabel
--accent-color
, karena "kuning" mungkin sebenarnya tidak berwarna kuning dalam mode gelap atau sebaliknya.
Di bawah ini adalah contoh dari beberapa variabel lainnya 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 sematan Glitch berikut, Anda dapat melihat contoh lengkap yang mempraktikkan konsep di atas. Coba alihkan mode gelap di setelan sistem operasi tertentu dan lihat reaksi halamannya.
Memuat dampak
Saat menggunakan contoh ini, Anda dapat mengetahui alasan saya memuat dark.css
dan light.css
melalui kueri media.
Coba alihkan mode gelap dan muat ulang halaman:
stylesheet tertentu yang saat ini tidak cocok akan tetap dimuat, tetapi dengan prioritas terendah,
sehingga tidak akan pernah bersaing dengan resource yang dibutuhkan oleh situs saat ini.
![Diagram pemuatan jaringan yang menunjukkan bagaimana CSS mode gelap dimuat dengan prioritas terendah dalam mode terang](https://web.dev/static/articles/prefers-color-scheme/image/network-loading-diagram-s-012ca50547d95.png?authuser=6&hl=id)
![Diagram pemuatan jaringan menunjukkan bagaimana dalam mode gelap CSS mode terang dimuat dengan prioritas terendah](https://web.dev/static/articles/prefers-color-scheme/image/network-loading-diagram-s-2c75aa35a227f.png?authuser=6&hl=id)
![Diagram pemuatan jaringan menunjukkan bagaimana dalam mode terang default, CSS mode gelap dimuat dengan prioritas terendah](https://web.dev/static/articles/prefers-color-scheme/image/network-loading-diagram-s-f53f63ae3c9fc.png?authuser=6&hl=id)
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 diikuti 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 satu warna untuk mode gelap. Pada saat penulisan, 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" />
Melakukan debug dan menguji mode gelap
Mengemulasi prefers-color-scheme
di DevTools
Beralih skema warna seluruh sistem operasi bisa sangat mengganggu,
sehingga Chrome DevTools kini memungkinkan Anda mengemulasikan skema warna pilihan pengguna
dengan cara yang hanya memengaruhi tab yang saat ini terlihat.
Buka Command Menu, mulai ketik Rendering
, jalankan perintah Show Rendering
, lalu ubah opsi Emulate CSS media feature chooses-color- scheme.
![Screenshot opsi 'Emulate CSS media feature tetapkan pilihan warna-skema' yang ada di tab Rendering di Chrome DevTools](https://web.dev/static/articles/prefers-color-scheme/image/a-screenshot-the-emulat-f4221ac142773.png?authuser=6&hl=id)
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 metode sekali pakai, atau menjadikannya bagian dari rangkaian 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 bersih
Mungkin Anda perhatikan bahwa saya tidak menggunakan warna putih bersih.
Sebagai gantinya, untuk mencegah kilau dan pendarahan di konten gelap di sekitarnya,
saya memilih putih yang sedikit lebih gelap. Sesuatu seperti rgb(250, 250, 250)
berfungsi dengan baik.
Mewarnai ulang dan menggelapkan gambar fotografi
Jika membandingkan kedua screenshot di bawah, Anda akan melihat bahwa tidak hanya tema inti yang berubah dari dark-on-light menjadi light-on-dark, tetapi banner besar juga terlihat sedikit berbeda. Riset pengguna saya menunjukkan bahwa sebagian besar orang yang disurvei lebih menyukai gambar yang sedikit kurang terang dan tidak cemerlang saat mode gelap aktif. Saya menyebutnya sebagai pewarnaan ulang.
![Banner besar sedikit lebih gelap dalam mode gelap.](https://web.dev/static/articles/prefers-color-scheme/image/hero-image-slightly-darke-a5b441df726e3.png?authuser=6&hl=id)
![Banner besar biasa dalam mode terang.](https://web.dev/static/articles/prefers-color-scheme/image/regular-hero-image-light-28d9151fd34c3.png?authuser=6&hl=id)
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, idenya adalah saya dapat memberikan perlakuan pewarnaan ulang (ikon) vektor yang berbeda dari gambar (foto) saya, informasi selengkapnya tentang hal ini di paragraf berikutnya.
Perhatikan cara saya menggunakan variabel CSS lagi,
agar nantinya 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
Tidak semua orang sama dan orang memiliki kebutuhan mode gelap yang berbeda.
Dengan tetap menggunakan metode pewarnaan ulang yang dijelaskan di atas,
saya dapat dengan mudah menjadikan intensitas hitam putih sebagai preferensi pengguna yang dapat saya
ubah melalui JavaScript,
dan dengan menetapkan nilai 0%
, saya juga dapat menonaktifkan pewarnaan ulang sepenuhnya.
Perlu diperhatikan bahwa document.documentElement
menyediakan referensi ke elemen root dokumen,
yaitu, elemen yang sama yang dapat saya rujuk dengan
class pseudo CSS :root
.
const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);
Inversi grafik vektor dan ikon
Untuk grafik vektor—yang dalam kasus saya digunakan sebagai ikon yang saya rujuk melalui elemen <img>
—saya
menggunakan metode pewarnaan ulang yang berbeda.
Meskipun penelitian telah menunjukkan bahwa orang tidak menyukai inversi untuk foto, cara ini berfungsi sangat baik untuk sebagian besar ikon.
Sekali lagi, saya menggunakan variabel CSS untuk menentukan jumlah inversi dalam status reguler dan :hover
.
![Ikon dibalik dalam mode gelap.](https://web.dev/static/articles/prefers-color-scheme/image/icons-are-inverted-dark-d78f9971c6dd6.png?authuser=6&hl=id)
![Ikon biasa dalam mode terang.](https://web.dev/static/articles/prefers-color-scheme/image/regular-icons-light-mode-bcabc11023a1e.png?authuser=6&hl=id)
Perhatikan, sekali lagi saya hanya membalik 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, daripada menggunakan filter inversi,
Anda dapat memanfaatkan kata kunci CSS currentColor
yang mewakili nilai properti color
elemen.
Hal ini memungkinkan Anda 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 properti warna yang diwarisi.
Lebih baik lagi: ini juga berfungsi untuk
<svg><use href="…"></svg>
,
sehingga Anda dapat memiliki resource terpisah
dan currentColor
akan tetap diterapkan sesuai konteks.
Perlu diperhatikan bahwa cara ini hanya berfungsi untuk SVG inline atau <use href="…">
,
tetapi bukan 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 di antara mode
Peralihan dari mode gelap ke mode terang atau sebaliknya dapat lebih lancar berkat
color
dan background-color
adalah
properti CSS yang dapat dianimasikan.
Membuat animasi semudah mendeklarasikan dua transition
untuk kedua properti.
Contoh di bawah ini mengilustrasikan ide secara keseluruhan. Anda dapat merasakannya 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);
}
Arah seni dengan mode gelap
Sementara untuk memuat alasan performa secara umum, sebaiknya gunakan prefers-color-scheme
dalam atribut media
dari elemen <link>
secara eksklusif (bukan inline di stylesheet),
ada situasi saat Anda mungkin ingin menggunakan prefers-color-scheme
secara langsung dalam kode HTML.
Arah seni adalah situasi seperti itu.
Di web, seni visual berkaitan dengan keseluruhan tampilan visual dari sebuah halaman dan caranya berkomunikasi secara visual, menstimulasi mood, mengontraskan fitur, dan menarik secara psikologis bagi target audiens.
Dengan mode gelap, desainer bebas menentukan 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, saya menunjukkan belahan dunia Barat untuk mode gelap, dan belahan bumi Timur untuk mode terang atau bila tidak ada preferensi yang diberikan, dan dalam semua kasus lainnya, defaultnya adalah belahan dunia Timur.
Tentu saja ini hanya untuk tujuan ilustrasi.
Aktifkan/nonaktifkan 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 menambahkan pilihan untuk tidak ikut
Seperti disebutkan di bagian alasan mode gelap di atas,
mode gelap adalah pilihan estetika bagi sebagian besar pengguna.
Akibatnya, beberapa pengguna mungkin sebenarnya ingin memiliki UI sistem operasi
dengan warna gelap, tetapi tetap lebih suka melihat halaman web mereka seperti biasanya.
Pola yang bagus adalah pada awalnya mematuhi sinyal yang dikirimkan browser melalui
prefers-color-scheme
, tetapi secara opsional mengizinkan pengguna mengganti setelan level sistem mereka.
Elemen kustom <dark-mode-toggle>
Anda tentu saja dapat membuat kode untuk ini sendiri, tetapi Anda juga dapat menggunakan elemen khusus siap pakai (komponen web) yang telah saya buat dengan tepat untuk tujuan ini.
Ini disebut <dark-mode-toggle>
dan menambahkan tombol (mode gelap: aktif/nonaktif) atau
pengalih tema (tema: terang/gelap) ke halaman yang dapat Anda sesuaikan sepenuhnya.
Demo di bawah menunjukkan cara kerja elemen
(oh, dan saya juga telah 🤫 menyelipkannya secara diam-diam di semua
contoh
lain
di atas).
<dark-mode-toggle
legend="Theme Switcher"
appearance="switch"
dark="Dark"
light="Light"
remember="Remember this"
></dark-mode-toggle>
![mode-gelap dalam mode terang.](https://web.dev/static/articles/prefers-color-scheme/image/dark-mode-toggle-light-4a5dd3fe9675d.png?authuser=6&hl=id)
<dark-mode-toggle>
dalam mode terang.
![mode-gelap dalam mode terang.](https://web.dev/static/articles/prefers-color-scheme/image/dark-mode-toggle-light-f0b507bcb5df2.png?authuser=6&hl=id)
<dark-mode-toggle>
dalam mode gelap.
Coba klik atau ketuk kontrol mode gelap di sudut kanan atas pada demo di bawah ini. Jika Anda mencentang kotak di kontrol ketiga dan keempat, lihat bagaimana pemilihan mode Anda diingat bahkan saat Anda memuat ulang halaman. Dengan begitu, pengunjung dapat membiarkan sistem operasi mereka dalam mode gelap, tetapi menikmati situs Anda dalam mode terang atau sebaliknya.
Kesimpulan
Bekerja dengan dan mendukung mode gelap itu menyenangkan dan membuka jalan desain baru.
Bagi sebagian pengunjung, hal ini bisa menjadi perbedaan antara tidak mampu menangani situs
dan menjadi pengguna yang puas.
Ada beberapa kesalahan dan pengujian yang cermat pasti diperlukan,
tetapi mode gelap jelas merupakan peluang besar 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 untuk menciptakan pengalaman mode gelap yang luar biasa.
Beri tahu kami di Twitter terkait apa yang Anda buat dan apakah postingan ini berguna
atau juga saran untuk meningkatkannya.
Terima kasih sudah membaca. 🌒
Link terkait
Referensi untuk kueri media prefers-color-scheme
:
Resource untuk tag meta color-scheme
dan properti CSS:
- Properti CSS dan tag meta
color-scheme
- Halaman Status Platform Chrome
- Bug Chromium
- Spesifikasi Modul Penyesuaian Warna CSS Level 1
- Masalah GitHub WG CSS untuk tag meta dan properti CSS
- Masalah GitHub HTML HOWWG untuk tag meta
Link mode gelap umum:
- Desain Material—Tema Gelap
- Mode Gelap di Web Inspector
- Dukungan Mode Gelap di WebKit
- Panduan Antarmuka Manusia Apple—Mode Gelap
Artikel penelitian latar belakang untuk posting ini:
- Apa yang Sebenarnya Dilakukan dengan "supported-color-skema" Mode Gelap? 🤔
- Biarlah gelap! 🌚 Mungkin...
- Pewarnaan Ulang untuk Mode Gelap
Ucapan terima kasih
Fitur media prefers-color-scheme
, properti CSS color-scheme
,
dan tag meta terkait adalah pekerjaan penerapan 👏 Rune Lillesveen.
Rune juga merupakan co-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 terkait artikel ini.
Strategi pemuatan adalah gagasan Jake Archibald.
Emilio Cobos Álvarez telah mengarahkan saya ke metode deteksi prefers-color-scheme
yang benar.
Tips dengan SVG dan currentColor
yang direferensikan berasal dari
Timothy Hatcher.
Terakhir, saya berterima kasih kepada banyak peserta anonim dari berbagai studi pengguna
yang telah membantu membentuk rekomendasi dalam artikel ini.
Banner besar oleh Nathan Anderson.