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

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
Green Screen (Sumber)

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
Gelap-di atas putih (Sumber)

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
Browser WorldWideWeb (Sumber)

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
Smartphone yang digunakan di tempat tidur (Sumber: Unsplash)

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
CloseView System 7 (Sumber)

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
Setelan tema gelap Android Q

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
Situs dalam mode terang memuat CSS mode gelap dengan prioritas terendah.
Diagram pemuatan jaringan menunjukkan bagaimana dalam mode gelap CSS mode terang dimuat dengan prioritas terendah
Situs dalam mode gelap memuat CSS mode terang dengan prioritas terendah.
Diagram pemuatan jaringan menunjukkan bagaimana dalam mode terang default, CSS mode gelap dimuat dengan prioritas terendah
Situs dalam mode terang default di browser yang tidak mendukung 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 &#39;Emulate CSS media feature tetapkan pilihan warna-skema&#39; yang ada di tab Rendering di Chrome DevTools

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.
Banner besar sedikit gelap dalam mode gelap.
Banner besar biasa dalam mode terang.
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 (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.
Ikon terbalik dalam mode gelap.
Ikon biasa dalam mode terang.
Ikon biasa dalam mode terang.

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.
<dark-mode-toggle> dalam mode terang.
mode-gelap dalam mode terang.
<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. 🌒

Referensi untuk kueri media prefers-color-scheme:

Resource untuk tag meta color-scheme dan properti CSS:

Link mode gelap umum:

Artikel penelitian latar belakang untuk posting ini:

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.