Preferreds-color-scheme: Halo kegelapan, teman lama saya

Terlalu dibesar-besarkan atau kebutuhan? Pelajari semua hal tentang mode gelap dan cara mendukungnya untuk memberikan manfaat bagi pengguna Anda.

Thomas Steiner

Pengantar

Mode gelap sebelum Mode Gelap

Kita telah kembali ke titik awal dengan mode gelap. Pada awal era komputasi pribadi, mode gelap bukanlah pilihan, melainkan fakta: Monitor komputer CRT monokrom bekerja dengan menembakkan sinar elektron pada layar fosfor dan fosfor yang digunakan dalam 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 WYSIWYG yang lebih canggih untuk desktop publishing, ide untuk membuat dokumen virtual menyerupai selembar kertas fisik menjadi populer.

Di sinilah gelap di atas putih sebagai tren desain dimulai, dan tren ini berlanjut 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 di atas latar belakang terang, asumsi dasar yang juga dikodekan secara permanen dalam stylesheet agen pengguna, termasuk Chrome.

Era CRT sudah lama berakhir. Konsumsi dan pembuatan konten telah beralih ke perangkat seluler yang menggunakan LCD dengan lampu latar atau layar AMOLED hemat energi. Komputer, tablet, dan smartphone yang lebih kecil dan mudah dibawa menyebabkan munculnya pola penggunaan baru. Tugas-tugas santai seperti menjelajahi web, menulis kode untuk bersenang-senang, dan bermain game kelas atas sering dilakukan di luar jam kerja dalam lingkungan yang redup. Orang bahkan menikmati perangkat mereka di tempat tidur pada malam hari. Semakin banyak orang menggunakan perangkat mereka dalam kondisi gelap, semakin populer ide untuk kembali ke akar light-on-dark.

Alasan menggunakan 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 "elegan dan indah". Apple dalam dokumentasi developer Mode Gelap menulis secara eksplisit: "Pilihan apakah akan mengaktifkan tampilan terang atau gelap adalah pilihan estetika bagi sebagian besar pengguna, dan mungkin tidak terkait dengan kondisi pencahayaan sekitar."

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. Alat aksesibilitas paling awal yang dapat saya temukan adalah fitur CloseView System 7, yang memiliki tombol untuk Hitam di Putih dan Putih di Hitam. Meskipun System 7 mendukung warna, antarmuka pengguna defaultnya masih hitam putih.

Penerapan berbasis inversi ini menunjukkan kelemahannya setelah warna diperkenalkan. Riset pengguna oleh Szpiro et al. tentang cara pengguna 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 Computer Vision, juga dikenal sebagai Ketegangan 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 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 defisiensi 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 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 diketahui dapat menghemat banyak energi di layar AMOLED. Studi kasus Android yang berfokus pada aplikasi Google populer seperti YouTube telah menunjukkan bahwa penghematan daya bisa mencapai 60%. Video di bawah 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 tinjau 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, opsi ini berada di bagian General pada preferensi sistem dan disebut Appearance (screenshot), dan di Windows 10, opsi ini berada di bagian Colors dan disebut Choose your color (screenshot). Untuk Android Q, Anda dapat menemukannya di bagian Tampilan sebagai tombol pengaktif/penonaktif 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 mulai. Kueri media memungkinkan penulis menguji dan membuat kueri nilai atau fitur agen pengguna atau perangkat tampilan, terlepas dari dokumen yang dirender. Atribut ini digunakan dalam aturan CSS @media untuk menerapkan gaya secara bersyarat ke dokumen, dan dalam berbagai konteks dan bahasa lainnya, seperti HTML dan JavaScript. Media Queries Level 5 memperkenalkan fitur media preferensi pengguna, yaitu, cara bagi situs untuk mendeteksi cara pilihan pengguna dalam menampilkan konten.

Fitur media prefers-color-scheme digunakan untuk mendeteksi apakah pengguna telah meminta halaman untuk menggunakan tema warna terang atau gelap. Fungsinya 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

Mengetahui 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 atau tidak. Perhatikan bagaimana saya tidak menyertakan nilai apa pun, tetapi hanya memeriksa apakah kueri media itu sendiri 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 perangkat 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 Tabel dukungan Can I use.

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 dan dengan demikian menghindari tema warna yang salah.

Mode gelap dalam praktik

Terakhir, mari kita lihat tampilan dukungan mode gelap dalam praktiknya. Sama seperti Highlander, dengan mode gelap, hanya ada satu: gelap atau terang, tetapi tidak pernah keduanya. Mengapa saya menyebutkan hal ini? Karena fakta ini akan memengaruhi strategi pemuatan. Jangan paksa pengguna mendownload CSS di jalur rendering penting yang ditujukan untuk mode yang saat ini tidak mereka gunakan. Oleh karena itu, 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.css yang berisi aturan generik 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 yang terakhir, light.css dan dark.css, dimuat secara kondisional 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 kondisional dalam skrip inline yang sangat kecil (light adalah pilihan arbitrer, saya juga bisa menjadikan dark sebagai pengalaman penggantian default). Untuk menghindari flash konten yang tidak memiliki 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 menggunakan variabel CSS secara maksimal, hal ini memungkinkan style.css umum saya menjadi, ya, umum, 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 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 merepresentasikan elemen <html> dan identik dengan pemilih html, kecuali spesifisitasnya lebih tinggi—pemilih tersebut di-cascade 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 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, memungkinkan browser merender kolom formulir dengan latar belakang gelap dan teks terang, menyesuaikan scroll bar, atau mengaktifkan warna sorotan yang sesuai tema. Detail persis color-scheme ditentukan dalam CSS Color Adjustment Module Level 1.

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 tidak berwarna kuning dalam mode gelap atau sebaliknya. Di bawah ini adalah contoh 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 dari atas. Coba aktifkan/nonaktifkan mode gelap di setelan sistem operasi Anda, lalu lihat reaksi halaman.

Memuat dampak

Saat bereksperimen dengan contoh ini, Anda dapat melihat alasan saya memuat dark.css dan light.css melalui kueri media. Coba aktifkan 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 dibutuhkan oleh situs saat ini.

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 lainnya untuk mode gelap. Pada saat penulisan, Anda tidak dapat menentukannya dalam manifes. Lihat masalah w3c/manifest#975 GitHub.

<meta
  name="theme-color"
  media="(prefers-color-scheme: light)"
  content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

Proses debug dan pengujian mode gelap

Mengemulasi prefers-color-scheme di DevTools

Mengubah skema warna seluruh sistem operasi dapat dengan cepat mengganggu, jadi Chrome DevTools kini memungkinkan Anda mengemulasi 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 Emulate CSS media feature 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 DevTools Protocol. 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 satu kali, atau menjadikannya bagian dari suite pengujian Integrasi Berkelanjutan (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 warna yang menyebar pada konten gelap di sekitarnya, saya memilih warna putih yang sedikit lebih gelap. Nama seperti rgb(250, 250, 250) akan berfungsi dengan baik.

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 atas terang menjadi terang di atas gelap, tetapi gambar utama juga terlihat sedikit berbeda. Riset pengguna saya telah menunjukkan bahwa sebagian besar 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 ide bahwa saya dapat memberikan perlakuan pewarnaan ulang yang berbeda pada grafik vektor (ikon) daripada gambar (foto), selengkapnya di paragraf berikutnya. Perhatikan bagaimana saya menggunakan variabel CSS lagi, sehingga saya dapat mengubah filter dengan fleksibel di kemudian hari.

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 menjadikan intensitas skala abu-abu sebagai 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);

Membalikkan 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 penelitian telah 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 keadaan reguler dan dalam keadaan :hover.

Perhatikan bagaimana saya hanya membalikkan ikon di dark.css, tetapi tidak di light.css, dan bagaimana :hover mendapatkan intensitas pembalikan yang berbeda dalam dua kasus untuk membuat ikon tampak sedikit lebih gelap atau sedikit lebih terang, bergantung pada mode yang telah 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);
}

Gunakan currentColor untuk SVG inline

Untuk gambar SVG inline, alih-alih menggunakan filter inversi, Anda dapat memanfaatkan kata kunci CSS currentColor yang merepresentasikan nilai properti color elemen. Dengan demikian, Anda dapat menggunakan nilai color pada properti yang tidak menerimanya secara default. Dengan mudah, jika currentColor digunakan sebagai nilai atribut SVG fill atau stroke, nilai tersebut akan diambil dari nilai properti warna yang diwarisi. Lebih baik lagi: hal ini juga berfungsi untuk <svg><use href="…"></svg>, sehingga Anda dapat memiliki resource terpisah dan currentColor akan tetap diterapkan dalam konteks. Perlu diperhatikan bahwa ini hanya berfungsi untuk SVG inline atau <use href="…">, tetapi tidak untuk SVG yang dirujuk sebagai src gambar atau dengan cara tertentu melalui CSS. Anda dapat melihat penerapan ini dalam demo di bawah.

<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>

Transisi yang lancar antarmode

Beralih dari mode gelap ke mode terang atau sebaliknya dapat dilakukan dengan lancar berkat fakta bahwa color dan background-color adalah properti CSS yang dapat dianimasikan. Membuat animasi semudah mendeklarasikan dua transition untuk dua properti. Contoh di bawah mengilustrasikan ide secara keseluruhan, Anda dapat melihatnya 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);
}

Arahan visual dengan mode gelap

Meskipun untuk alasan performa pemuatan secara umum, sebaiknya Anda hanya menggunakan prefers-color-scheme dalam atribut media elemen <link> (bukan inline dalam stylesheet), ada situasi ketika Anda mungkin ingin menggunakan prefers-color-scheme secara langsung inline dalam kode HTML. Arahan artistik adalah salah satu situasi tersebut. Di web, pengarahan visual berkaitan dengan tampilan visual keseluruhan halaman dan cara halaman tersebut berkomunikasi secara visual, merangsang suasana hati, mengontraskan fitur, dan menarik perhatian target audiens secara psikologis.

Dengan mode gelap, desainer bebas memutuskan gambar terbaik dalam 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. Dalam contoh di bawah, saya menampilkan belahan bumi Barat untuk mode gelap, dan belahan bumi Timur untuk mode terang atau saat tidak ada preferensi yang diberikan, dengan default 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 menambahkan opsi untuk menonaktifkannya

Seperti yang disebutkan di bagian mengapa mode gelap di atas, mode gelap adalah pilihan estetika bagi sebagian besar pengguna. Akibatnya, beberapa pengguna mungkin menyukai UI sistem operasi mereka dalam mode gelap, tetapi tetap lebih suka melihat halaman web seperti yang biasa mereka lihat. Pola yang baik adalah dengan awalnya mematuhi sinyal yang dikirim browser melalui prefers-color-scheme, tetapi kemudian secara opsional mengizinkan pengguna 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 (komponen web) siap pakai yang telah saya buat untuk tujuan ini. Fitur ini disebut <dark-mode-toggle> dan menambahkan tombol (mode gelap: aktif/nonaktif) atau pengubah tema (tema: terang/gelap) ke halaman yang dapat Anda sesuaikan sepenuhnya. Demo di bawah menunjukkan cara kerja elemen (dan, saya juga 🤫 secara diam-diam memasukkannya ke dalam semua contoh lainnya di atas).

<dark-mode-toggle
  legend="Theme Switcher"
  appearance="switch"
  dark="Dark"
  light="Light"
  remember="Remember this"
></dark-mode-toggle>

Coba klik atau ketuk kontrol mode gelap di sudut kanan atas dalam demo berikut. Jika Anda mencentang kotak centang di kontrol ketiga dan keempat, lihat bagaimana pilihan mode Anda diingat meskipun 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 sangat 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 kekurangan dan pengujian yang cermat jelas diperlukan, tetapi mode gelap jelas merupakan peluang besar bagi Anda untuk menunjukkan bahwa Anda peduli terhadap semua pengguna Anda. Praktik terbaik yang disebutkan dalam postingan ini dan helper seperti elemen kustom <dark-mode-toggle> akan membuat Anda yakin dalam kemampuan Anda untuk menciptakan pengalaman mode gelap yang luar biasa. Beri tahu saya di Twitter 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:

• Halaman Status Platform Chrome
• Bug Chromium
• Spesifikasi Media Queries Level 5

Referensi untuk tag meta dan properti CSS color-scheme:

• Properti CSS color-scheme dan tag meta
• Halaman Status Platform Chrome
• Bug Chromium
• Spesifikasi Modul Penyesuaian Warna CSS 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
• Pedoman Antarmuka Pengguna Apple—Mode Gelap

Artikel riset latar belakang untuk postingan ini:

• Apa yang Sebenarnya Dilakukan oleh "supported-color-schemes" Mode Gelap? 🤔
• Biarlah kegelapan! 🌚 Mungkin…
• Pewarnaan Ulang untuk Mode Gelap

Ucapan terima kasih

Fitur media prefers-color-scheme, properti CSS color-scheme, dan tag meta terkait adalah hasil kerja 👏 Rune Lillesveen. Rune juga merupakan salah satu editor spesifikasi CSS Color Adjustment Module Level 1. Saya ingin mengucapkan terima kasih 🙏 kepada Lukasz Zbylut, Rowan Merewood, Chirag Desai, dan Rob Dodson atas peninjauan menyeluruh mereka terhadap artikel ini. Strategi pemuatan adalah gagasan Jake Archibald. Emilio Cobos Álvarez telah menunjukkan kepada saya metode deteksi prefers-color-scheme yang benar. Tips dengan SVG yang dirujuk 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.