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

Berlebihan atau kebutuhan? Pelajari segala hal tentang mode gelap dan cara mendukungnya agar bermanfaat bagi pengguna Anda.

Thomas Steiner

Pengantar

Catatan: Saya telah melakukan banyak riset latar belakang tentang sejarah dan teori mode gelap. Jika Anda hanya tertarik untuk menggunakan mode gelap, jangan ragu untuk melewati bagian pengantar.

Mode gelap sebelum Dark Mode

Green screen (Sumber)

Kita telah menggunakan mode gelap secara keseluruhan. Di masa awal komputasi pribadi, mode gelap bukanlah masalah pilihan, tetapi sebenarnya: Monitor komputer CRT monokrom bekerja dengan menyalakan berkas elektron pada layar fosfor dan fosfor yang digunakan dalam CRT awal berwarna hijau. Karena teks ditampilkan dengan warna hijau dan bagian layar lainnya berwarna hitam, model ini sering disebut sebagai layar hijau.

Dark-on-white (Sumber)

Color CRT yang diperkenalkan selanjutnya menampilkan beberapa warna melalui penggunaan fosfor merah, hijau, dan biru. Mereka menciptakan warna putih dengan mengaktifkan ketiga fosfor secara bersamaan. Dengan hadirnya WYSIWYG yang lebih canggih publikasi desktop, ide untuk membuat dokumen virtual menyerupai selembar kertas fisik menjadi populer.

Browser WorldWideWeb (Sumber)

Di sinilah dark-on-white sebagai tren desain dimulai, dan tren ini dibawa ke berbasis dokumen versi 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—adalah hijau pada gelap. Saat ini, halaman web dan aplikasi web biasanya dirancang dengan teks gelap dengan latar belakang terang, asumsi dasar yang juga di-hardcode di stylesheet agen pengguna, termasuk Chrome.

Smartphone yang digunakan di tempat tidur (Sumber: Unsplash)

Hari-hari 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 ponsel cerdas yang lebih kecil dan mudah dibawa mengarah pada pola penggunaan baru. Tugas waktu luang seperti penjelajahan web, coding untuk hiburan, dan game kelas atas sering terjadi setelah jam kerja di lingkungan yang redup. Orang bahkan menikmati perangkat mereka di tempat tidur pada malam hari. Semakin banyak orang yang menggunakan perangkat mereka dalam gelap, semakin populer pula ide untuk kembali ke akar light-on-dark.

Alasan mode gelap

Mode gelap untuk alasan estetika

Saat orang ditanya alasan mereka menyukai atau menginginkan mode gelap, respons yang paling populer adalah bahwa "lebih nyaman di mata," diikuti dengan " elegan dan indah". Apple di Dokumentasi developer Mode Gelap secara eksplisit menulis: "Pilihan apakah akan mengaktifkan tampilan terang atau gelap adalah nilai estetika bagi sebagian besar pengguna, dan mungkin tidak terkait dengan kondisi pencahayaan sekitar."

Catatan: Baca selengkapnya tentang riset pengguna mengenai alasan orang menginginkan mode gelap dan cara mereka menggunakannya.

CloseView Sistem 7 (Sumber)

Mode gelap sebagai alat aksesibilitas

Ada juga orang yang sebenarnya memerlukan mode gelap dan menggunakannya sebagai alat aksesibilitas lain, misalnya, pengguna dengan gangguan penglihatan. Kejadian paling awal dari alat aksesibilitas yang dapat saya temukan adalah Fitur CloseView sistem 7, yang memiliki tombol untuk Hitam di Atas Putih dan Putih di Atas Hitam. Meskipun sistem 7 mendukung warna, antarmuka pengguna default masih hitam putih.

Implementasi berbasis inversi ini menunjukkan kelemahannya setelah warna diperkenalkan. Riset pengguna oleh Szpiro et al. terkait bagaimana orang dengan perangkat komputasi akses yang memiliki gangguan penglihatan menunjukkan bahwa semua pengguna yang diwawancarai tidak menyukai gambar terbalik, tapi banyak teks terang yang disukai dengan latar belakang gelap. Apple mengakomodasi preferensi pengguna ini dengan fitur yang disebut Invert Pintar, yang membalikkan warna pada layar, kecuali untuk gambar, media, dan beberapa aplikasi yang menggunakan gaya warna gelap.

Bentuk khusus dari gangguan penglihatan adalah {i>Computer Vision Syndrome, <i} juga dikenal sebagai Digital Eye Strain, yang ditentukan sebagai "kombinasi masalah mata dan penglihatan yang terkait dengan penggunaan komputer (termasuk desktop, laptop, dan tablet) serta layar elektronik lainnya (mis. smartphone dan perangkat baca elektronik)." Telah diusulkan bahwa penggunaan perangkat elektronik oleh remaja, terutama di malam hari, menyebabkan peningkatan risiko durasi tidur yang lebih pendek, latensi onset tidur yang lebih lama, dan peningkatan kekurangan tidur. Selain itu, paparan cahaya biru telah banyak dilaporkan terlibat dalam peraturan ritme sirkadian dan siklus tidur. dan lingkungan yang tidak teratur dapat menyebabkan kurang tidur, mungkin mempengaruhi suasana hati dan kinerja tugas, menurut riset oleh Rosenfield. Untuk membatasi efek negatif ini, kurangi cahaya biru dengan menyesuaikan suhu warna tampilan melalui fitur seperti Shift Malam atau aplikasi Android Cahaya Malam 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 dengan Layar AMOLED. Studi kasus Android yang berfokus pada aplikasi Google yang populer Seperti YouTube telah menunjukkan bahwa penghematan daya bisa mencapai 60%. Video di bawah ini menampilkan detail selengkapnya tentang studi kasus dan penghematan daya per aplikasi.

Mengaktifkan mode gelap dalam sistem operasi

Saya telah membahas latar belakang mengapa mode gelap sangat penting bagi banyak pengguna, mari kita tinjau bagaimana Anda dapat mendukungnya.

Setelan tema gelap Android Q

Sistem operasi yang mendukung mode gelap atau tema gelap biasanya memiliki opsi untuk mengaktifkannya di suatu tempat di pengaturan. Di macOS X, terletak di bagian General preferensi sistem dan disebut Appearance (screenshot), Pada Windows 10, berada di bagian Colors dan disebut Choose your color (screenshot). Untuk Android Q, Anda dapat menemukannya di bagian Tampilan sebagai tombol beralih Tema Gelap (screenshot), dan di iOS 13, Anda dapat mengubah Tampilan di bagian Tampilan & Kecerahan setelan (screenshot).

Kueri media prefers-color-scheme

Satu teori lagi sebelum saya lanjutkan. Kueri media memungkinkan penulis menguji dan mengkueri nilai atau fitur agen pengguna atau perangkat tampilan, terlepas dari dokumen yang dirender. Gaya itu digunakan dalam aturan @media CSS untuk menerapkan gaya pada dokumen secara bersyarat, serta dalam berbagai konteks dan bahasa lainnya, seperti HTML dan JavaScript. Kueri Media Level 5 memperkenalkan apa yang disebut fitur media preferensi pengguna, yaitu, cara situs mendeteksi cara pilihan pengguna untuk menampilkan konten.

Catatan: ☝️ Fitur media preferensi pengguna yang sudah dikenal adalah prefers-reduced-motion yang memungkinkan Anda mendeteksi keinginan untuk mengurangi gerakan di halaman. Saya pernah menulis tentang prefers-reduced-motion sebelumnya.

prefers-color-scheme fitur media digunakan untuk mendeteksi jika pengguna 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 memilih halaman yang memiliki tema gelap (teks terang dengan latar belakang gelap).

Catatan: Versi spesifikasi sebelumnya menyertakan nilai ketiga, no-preference. Hal itu dimaksudkan untuk menunjukkan bahwa pengguna tidak membuat preferensi yang diketahui oleh sistem. Karena tidak ada browser yang pernah menerapkannya, nilai ini dihapus dari spesifikasi.

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 yang sedang mendukung mode gelap dengan memeriksa apakah kueri media prefers-color-scheme sama sekali cocok. Perhatikan bahwa saya tidak menyertakan nilai apa pun, tetapi hanya memeriksa apakah kueri media saja yang cocok.

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('🎉 Dark mode is supported');
}

Pada saat penulisan ini, prefers-color-scheme didukung di desktop dan perangkat seluler (jika tersedia) oleh Chrome dan Edge pada versi 76, Firefox pada versi 67, dan Safari pada versi 12.1 di macOS dan versi 13 di iOS. Untuk semua browser lainnya, Anda dapat memeriksa bagian Dapatkah saya menggunakan tabel dukungan.

Catatan: Tersedia elemen kustom <dark-mode-toggle> yang menambahkan dukungan mode gelap ke browser lama. Saya akan menjelaskannya lebih lanjut di artikel ini.

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, memungkinkan server untuk menyejajarkan CSS yang tepat dan karenanya menghindari flash tema warna yang salah.

Mode gelap dalam praktik

Mari kita lihat penerapannya dalam dukungan mode gelap. Sama seperti Highlander, dengan mode gelap hanya boleh ada satu: gelap atau terang, tetapi tidak keduanya! Mengapa saya menyebutkannya? Karena fakta ini seharusnya berdampak pada strategi pemuatan. Jangan paksa pengguna untuk mendownload CSS di jalur rendering penting untuk mode yang saat ini tidak mereka gunakan. Untuk mengoptimalkan kecepatan pemuatan, saya harus membagi CSS untuk aplikasi contoh yang menunjukkan rekomendasi berikut dalam praktik 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.

Memuat strategi

Dua yang terakhir, light.css dan dark.css, dimuat secara kondisional dengan kueri <link media>. Awalnya, tidak semua browser akan mendukung prefers-color-scheme (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 membuat gelap 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 memaksimalkan penggunaan variabel CSS, hal ini memungkinkan style.css generik saya menjadi 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 seharusnya sudah cukup untuk menyampaikan ide secara keseluruhan. Saya mendeklarasikan dua variabel, -⁠-⁠color dan -⁠-⁠background-color yang pada dasarnya membuat tema dasar bawaan dark-on-light dan light-on-dark.

/* 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 { … }. Sebagaimana didefinisikan dalam Class semu CSS :root— pemilih bahwa dalam HTML mewakili elemen <html> dan identik dengan pemilih html, hanya saja kekhususannya adalah lebih tinggi—mereka berjenjang ke bawah, sehingga saya dapat 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 light dark yang dipisahkan spasi.

Ini memberi tahu browser tema warna mana yang didukung aplikasi saya dan memungkinkannya untuk mengaktifkan varian khusus dari stylesheet agen pengguna, yang berguna untuk, misalnya, membiarkan browser merender kolom formulir dengan latar belakang gelap dan teks terang, sesuaikan scroll bar, atau untuk mengaktifkan warna sorotan yang sesuai tema. Detail color-scheme yang sebenarnya ditentukan dalam Modul Penyesuaian Warna CSS Level 1.

Catatan: 🏅 Baca selengkapnya tentang apa sebenarnya yang dilakukan color-scheme.

Hal lainnya hanyalah penentuan variabel CSS untuk hal-hal 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, sebagai "kuning" sebenarnya tidak berwarna kuning dalam mode gelap atau sebaliknya. Di bawah ini 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 sematan Glitch berikut, Anda dapat melihat contoh lengkap yang mempraktikkan konsep dari atas. Coba aktifkan/nonaktifkan mode gelap di setelan sistem operasi Anda dan melihat bagaimana halaman bereaksi.

Memuat dampak

Ketika Anda bermain-main dengan contoh ini, Anda bisa melihat mengapa saya memuat dark.css dan light.css saya melalui kueri media. Coba aktifkan/nonaktifkan mode gelap dan muat ulang halaman: stylesheet tertentu yang saat ini tidak cocok akan tetap dimuat, tetapi dengan prioritas paling rendah, sehingga mereka tidak akan pernah bersaing dengan sumber daya yang dibutuhkan oleh situs saat ini.

Catatan: 😲 Baca selengkapnya tentang mengapa browser mendownload stylesheet dengan kueri media yang tidak cocok.

Situs dalam mode terang memuat CSS mode gelap dengan prioritas terendah.

Situs dalam mode gelap memuat CSS mode terang dengan prioritas terendah.

Situs dalam mode terang default di browser yang tidak mendukung prefers-color-scheme memuat CSS mode gelap dengan prioritas paling rendah.

Bereaksi terhadap perubahan mode gelap

Seperti perubahan kueri media lainnya, perubahan mode gelap dapat diikuti melalui JavaScript. Anda bisa menggunakannya untuk, misalnya, secara dinamis mengubah favicon pada halaman atau mengubah <meta name="theme-color"> yang menentukan warna bilah URL di Chrome. Contoh lengkap di atas menunjukkan penerapannya, 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. Tujuan yang pertama yang cocok akan dipilih. Misalnya, Anda bisa memiliki satu warna untuk mode terang dan satu lagi untuk mode gelap. Pada saat penulisan ini, Anda tidak dapat mendefinisikannya dalam manifes Anda. Lihat w3c/manifes#975 GitHub masalah.

<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

Mengemulasi prefers-color-scheme di DevTools

Mengubah skema warna seluruh sistem operasi bisa sangat mengganggu dengan cepat, jadi Chrome DevTools sekarang 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 chooses-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 satu kali, atau menjadikannya bagian dari Paket 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

Detail kecil yang mungkin Anda perhatikan adalah bahwa saya tidak menggunakan putih bersih. Sebagai gantinya, untuk mencegah cahaya dan pendarahan terhadap konten gelap di sekitarnya, Saya memilih warna putih yang sedikit lebih gelap. Sepertinya rgb(250, 250, 250) berfungsi dengan baik.

Warnai ulang dan gelapkan gambar fotografi

Jika Anda membandingkan dua screenshot di bawah, Anda akan melihat bahwa bukan hanya tema intinya yang berubah dari dark-on-light ke light-on-dark, tetapi banner besar juga akan terlihat sedikit berbeda. Riset pengguna saya telah menunjukkan bahwa sebagian besar orang yang disurvei memilih gambar yang sedikit lebih gelap dan cemerlang saat mode gelap aktif. Saya menyebutnya sebagai pewarnaan ulang.

Banner besar sedikit gelap dalam mode gelap.

Banner besar biasa dalam mode terang.

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 yang berbeda pada grafik vektor daripada gambar saya (foto), selengkapnya di paragraf berikutnya. Perhatikan cara saya menggunakan variabel CSS lagi, sehingga nantinya saya dapat mengubah filter secara fleksibel.

Catatan: 🎨 Baca selengkapnya tentang riset pengguna mengenai preferensi pewarnaan ulang dengan mode gelap.

Karena pewarnaan ulang hanya diperlukan dalam mode gelap, saat dark.css aktif, tidak ada aturan terkait 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 setiap orang memiliki kebutuhan mode gelap yang berbeda. Dengan tetap berpegang pada metode pewarnaan ulang yang dijelaskan di atas, Saya dapat dengan mudah menjadikan intensitas skala abu-abu sebagai preferensi pengguna mengubah melalui JavaScript, dan dengan menetapkan nilai 0%, saya juga dapat menonaktifkan pewarnaan ulang sepenuhnya. Perhatikan bahwa document.documentElement menyediakan referensi ke elemen {i>root<i} dari dokumen, yaitu, elemen yang sama yang dapat saya rujuk dengan :root CSS pseudo-class.

const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);

Inversi ikon dan grafik 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 telah menunjukkan dan orang-orang tidak menyukai inversi foto, model ini bekerja dengan 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.

Ikon reguler dalam mode terang.

Perhatikan bagaimana lagi saya hanya membalikkan ikon di dark.css tetapi tidak di light.css, dan bagaimana :hover mendapatkan intensitas inversi yang berbeda dalam dua kasus untuk membuat ikon muncul sedikit lebih gelap atau sedikit lebih terang, tergantung 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 currentColor Kata kunci CSS yang mewakili nilai properti color elemen. Hal ini memungkinkan Anda menggunakan nilai color pada properti yang tidak menerimanya secara default. Mudah, jika currentColor digunakan sebagai nilai SVG Atribut fill atau stroke, ia mengambil nilainya dari nilai turunan properti warna. Lebih baik lagi: 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 bukan SVG yang dirujuk sebagai src gambar atau melalui CSS. Anda dapat melihatnya diterapkan dalam demo di bawah.

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

Transisi lancar antarmode

Beralih dari mode gelap ke mode terang atau sebaliknya dapat menjadi lebih lancar berkat adanya bahwa color dan background-color properti CSS animasi. Membuat animasi semudah mendeklarasikan dua transition untuk dua properti. Contoh di bawah ini menggambarkan keseluruhan ide. Anda dapat mencobanya 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 saja secara eksklusif dalam atribut media dari elemen <link> (bukan sebaris di stylesheet), ada situasi saat Anda sebenarnya mungkin ingin menggunakan prefers-color-scheme langsung inline dalam kode HTML Anda. Pengarahan seni adalah situasi yang tepat. Di web, pengaturan seni berkaitan dengan tampilan visual halaman secara keseluruhan dan bagaimana halaman tersebut berkomunikasi secara visual, merangsang suasana hati, mengontraskan fitur, dan menarik secara psikologis target audiens.

Dengan mode gelap, desainer memiliki keputusan untuk 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, saya menampilkan belahan Barat untuk mode gelap, dan belahan bumi Timur untuk mode terang atau jika tidak ada preferensi yang diberikan, secara default akan ditetapkan ke belahan bumi Timur dalam semua kasus lainnya. Bagian ini tentu saja hanya untuk tujuan ilustrasi. Alihkan mode gelap di perangkat 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 tidak ikut

Seperti yang disebutkan di bagian mengapa mode gelap di atas, mode gelap adalah pilihan estetika bagi sebagian besar pengguna. Konsekuensinya, beberapa pengguna mungkin sebenarnya ingin memiliki UI sistem operasi mereka dalam gelap, tapi tetap memilih untuk melihat laman web mereka seperti biasanya. Pola yang bagus adalah dengan terlebih dahulu mematuhi sinyal yang dikirimkan browser prefers-color-scheme, tetapi mengizinkan pengguna mengganti setelan tingkat sistem secara opsional.

Elemen kustom <dark-mode-toggle>

Tentu saja Anda bisa membuat kode untuk ini sendiri, tetapi Anda juga bisa menggunakan elemen khusus siap pakai (komponen web) yang telah saya buat dengan tepat 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 ini menunjukkan cara kerja elemen (oh, dan aku juga 🤫 diam-diam menyelipkannya di semua lainnya contoh 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 sudut kanan atas dalam demo di bawah. Jika Anda mencentang kotak di kontrol ketiga dan keempat, lihat bagaimana pemilihan mode Anda akan diingat bahkan saat Anda memuat ulang halaman. Hal ini memungkinkan pengunjung untuk menjaga sistem operasi mereka dalam mode gelap, tapi nikmati situs Anda dalam mode terang atau sebaliknya.

Kesimpulan

Menangani dan mendukung mode gelap sangat menyenangkan dan membuka jalan desain baru. Bagi sebagian pengunjung, hal ini bisa menjadi perbedaan antara ketidakmampuan untuk menangani situs Anda. dan menjadi pengguna yang senang. Ada beberapa kesalahan dan pengujian yang cermat 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 penunjang seperti Elemen kustom <dark-mode-toggle> harus membuat Anda percaya diri dengan kemampuan Anda untuk menciptakan pengalaman mode gelap yang menakjubkan. Beri tahu saya di Twitter konten yang Anda buat dan jika postingan ini bermanfaat atau juga saran untuk memperbaikinya. Terima kasih sudah membaca! 🌒

Link terkait

Referensi untuk kueri media prefers-color-scheme:

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

Referensi 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 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
• Panduan Antarmuka Manusia Apple—Mode Gelap

Artikel riset latar belakang untuk postingan ini:

• Apa yang dimaksud dengan "supported-color-Schemes" dalam Mode Gelap Sungguh? 🤔
• Biarkan 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 implementasi 👏 Rune Lillesveen. Rune juga merupakan co-editor spesifikasi Modul Penyesuaian Warna CSS Level 1. Saya ingin 🙏 terima kasih Lukasz Zbylut, Rowan Merewood, Chirag Desai, dan Rob Dodson atas ulasan mereka yang menyeluruh atas 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 Timotius Hatcher. Terakhir, saya berterima kasih kepada banyak peserta anonim dari berbagai studi yang telah membantu membentuk rekomendasi dalam artikel ini. Banner besar oleh Nathan Anderson.