Mode gelap tetap menjadi tren utama dalam desain situs web dan aplikasi. Kami menemukan artikel bagus tentang topik ini dan memutuskan untuk membagikan terjemahannya. Pendapat pengguna, implementasi dan dukungan mode gelap, rekomendasi untuk pengembang lebih lanjut di artikel. Di sisi mana Anda berada?
Hanya hype atau kebutuhan? Pelajari lebih lanjut tentang mode gelap. Saya akan menunjukkan cara menambahkan dukungan mode gelap untuk kepentingan pengguna Anda!
pengantar
Mengenai topik ini, saya melakukan banyak penelitian, mempelajari sejarah masalah tersebut. Jika Anda hanya tertarik bekerja dengan mode gelap, silakan lewati bagian pertama.
Mode Gelap sebelum menjadi mainstream
Mereka mengatakan sejarah adalah siklus. Dalam situasi mode gelap, kita kembali ke tempat semuanya dimulai. Pada masa awal komputer pribadi, mode gelap adalah satu-satunya pilihan: monitor CRT monokrom bekerja dengan menyinari berkas elektron ke layar berpendar, dan fosfor yang digunakan pada CRT awal berwarna hijau. Karena teks ditampilkan dalam warna hijau dan bagian layar lainnya berwarna hitam, model ini sering disebut sebagai layar hijau .
Selanjutnya, tampilan CRT berwarna mulai menampilkan berbagai warna melalui penggunaan fosfor merah, hijau, dan biru. Mereka menciptakan putih dengan mengaktifkan ketiga fosfor pada saat yang bersamaan. Dengan munculnya desktop publishing yang lebih modern dan teknologi WYSIWYG , ide membuat dokumen virtual terlihat seperti selembar kertas sungguhan telah menjadi populer.
Pada titik ini dalam desain, tren "gelap di atas putih" lahir, itu diterapkan di situs web pertama di jaringan - mereka lebih seperti dokumen teks.
Browser pertama di dunia, WorldWideWeb (bayangkan CSS belum ditemukan ) merender halaman web dengan cara ini. Fakta menarik: Line Mode Browser kedua (browser berbasis terminal) berwarna hijau di atas gelap. Saat ini, halaman web dan aplikasi biasanya dibuat dengan teks gelap dengan latar belakang terang, yang merupakan norma yang diterima. Skema warna ini dibangun ke dalam lembar gaya agen pengguna modern, termasuk misalnya Chrome....
Menggunakan smartphone ( sumber ) Hari-
hari monitor CRT sudah lama berlalu. Kami sekarang mengonsumsi dan membuat konten dalam jumlah besar di perangkat seluler yang menggunakan LCD backlit atau layar AMOLED yang hemat energi. Komputer, tablet, dan smartphone yang lebih kecil dan praktis telah menghasilkan pola perilaku pengguna yang baru. Di waktu luang kita, kita menghilang di jejaring sosial, program untuk bersenang-senang atau bermain game komputer. Ini biasanya terjadi setelah bekerja di malam hari dalam pencahayaan redup atau bahkan di malam hari di tempat tidur sebelum tidur. Semakin banyak orang menggunakan perangkat mereka dalam kegelapan, Mode Gelap menjadi semakin populer.
Mengapa Memilih Mode Gelap?
Untuk alasan estetika
Ketika orang ditanya mengapa mereka menyukai mode gelap , jawaban paling populer adalah "Lebih enak dipandang" atau "Mode gelap itu indah". Apple mengatakan secara terbuka dalam dokumentasi pengembangnya untuk Mode Gelap , "Pilihan gelap atau terang bagi sebagian besar pengguna didasarkan pada preferensi estetika dan mungkin tidak relevan dengan kondisi pencahayaan."
Cari tahu lebih lanjut dalam studi mengapa orang menyukai mode gelap dan bagaimana menggunakannya.
System 7 CloseView ( sumber )
Mode Gelap sebagai Alat Aksesibilitas untuk Penyandang Disabilitas
Beberapa orang perlu menggunakan Mode Gelap: misalnya, pengguna dengan gangguan penglihatan menggunakan Mode Gelap sebagai alat aksesibilitas. Penggunaan mode gelap paling awal sebagai alat aksesibilitas yang dapat saya temukan adalah fitur CloseView di Sistem 7, dengan kemampuan untuk mengubah skema warna dari hitam menjadi putih dan putih menjadi hitam. Meskipun Sistem 7 mendukung antarmuka warna, antarmuka pengguna default adalah hitam dan putih.
Metode berbasis inversi ini menunjukkan kelemahannya setelah menambah jumlah warna pada antarmuka. Sarit Szpiro melakukan survei dengan tim penelitipengguna tentang bagaimana orang-orang tunanetra menangani perangkat komputer. Hasilnya, ternyata semua responden tidak menyukai warna terbalik, tetapi banyak yang lebih menyukai teks terang dengan latar belakang gelap. Apple menangani preferensi pengguna ini dengan Smart Invert , yang mengubah warna pada tampilan, tidak termasuk gambar, media, dan beberapa aplikasi yang menggunakan gaya warna gelap.
Bentuk khusus dari low vision adalah sindrom penglihatan komputer, juga dikenal sebagai ketegangan mata digital. Istilah-istilah ini berartiberbagai masalah penglihatan yang terkait dengan seringnya penggunaan komputer (desktop, laptop dan tablet) dan perangkat elektronik lainnya (smartphone dan e-book). Ilmuwan berspekulasi bahwa penggunaan perangkat elektronik oleh remaja, terutama pada malam hari, dikaitkan dengan peningkatan risiko masalah tidur, insomnia, dan sindrom kurang tidur. Menurut penelitian lain , efek cahaya biru terlibat dalam regulasi ritme sirkadiandan siklus tidur, serta lingkungan cahaya yang tidak teratur dapat menyebabkan kurang tidur, yang memengaruhi suasana hati dan efisiensi seseorang dalam melakukan tugas. Anda dapat membatasi dampak negatif dengan mengurangi jumlah cahaya biru dengan menyesuaikan suhu warna tampilan (fitur seperti iOS Night Shift atau Android Night Light ), atau dengan mencegah cahaya terang atau tidak teratur secara umum dengan Tema atau Mode Gelap.
Menghemat Energi dalam Mode Gelap di Layar AMOLED
Mode gelap diketahui menghemat banyak daya pada layar AMOLED. Penelitian tentang aplikasi Google populer seperti YouTube telah membuktikan bahwa penghematan energi bisa mencapai 60%. Video di bawah ini memberikan rincian lebih lanjut tentang studi ini dan penghematan energi untuk setiap aplikasi.
Cara mengaktifkan mode gelap di sistem operasi
Sekarang saya telah membahas mengapa mode gelap sangat penting bagi banyak pengguna, mari kita lihat bagaimana Anda dapat menyesuaikannya.
Pengaturan tema gelap pada Android Q
Sistem operasi yang mendukung mode gelap atau tema gelap biasanya memiliki opsi untuk mengaktifkannya di pengaturan. Di macOS X, ini ada di bagian Umum Preferensi Sistem dan disebut Penampilan ( tangkapan layar ), dan di Windows 10, di bawah Warna disebut Pilih warna Anda ( tangkapan layar ). Untuk Android Q, Anda dapat mengalihkan mode ke Tampilan sebagai Tema Gelap ( tangkapan layar ), dan di iOS 13, Anda dapat mengubah warna antarmuka di bagian Tampilan & Kecerahan ( tangkapan layar ).
- prefers-color-scheme
Sedikit lebih banyak teori sebelum saya melanjutkan. Kueri media memungkinkan penulis untuk menguji dan menanyakan nilai dan properti agen pengguna atau perangkat secara terpisah dari rendering dokumen. Mereka digunakan dalam aturan media CSS untuk menerapkan gaya secara kondisional ke dokumen dan dalam beberapa konteks dan bahasa lain seperti HTML dan JavaScript. Kueri media Tingkat 5 memperkenalkan apa yang disebut properti media pilihan pengguna, yang merupakan sinyal bagi situs untuk menemukan cara yang disukai pengguna dalam menampilkan konten. Kumpulan
properti media CSS gerakan yang lebih disukai dapat digunakan untuk menentukan apakah pengguna meminta OS untuk meminimalkan jumlah animasi yang digunakannya. Aku sudahmenulis tentang gerakan yang lebih disukai-dikurangi- sebelumnya.
Properti media CSS skema-warna-warna digunakan untuk menentukan tema mana, terang atau gelap, yang digunakan oleh seseorang di sistem operasi. Ia bekerja dengan nilai-nilai berikut:
- tanpa preferensi : Menunjukkan bahwa pengguna belum membuat preferensi apa pun yang diketahui sistem. Kata kunci ini bernilai false dalam konteks logis .
- terang : Menunjukkan bahwa pengguna telah memberi tahu sistem bahwa mereka lebih memilih halaman dengan tema terang (teks gelap dengan latar belakang terang).
- gelap : Menunjukkan bahwa pengguna telah memberi tahu sistem bahwa mereka lebih memilih halaman dengan tema gelap (teks terang dengan latar belakang gelap).
Dukungan mode gelap
Cari tahu apakah mode gelap didukung oleh browser
Karena mode gelap dikomunikasikan melalui kueri media, Anda dapat dengan mudah memeriksa apakah browser saat ini mendukung mode gelap dengan mencari tahu apakah kueri media skema warna lebih sesuai . Harap dicatat bahwa saya tidak menyetel nilai, tetapi hanya memeriksa kueri media untuk kecocokan.
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log(' Dark mode is supported');
}
Pada saat penulisan, skema-warna-lebih didukung di desktop dan seluler (jika tersedia) di Chrome dan Edge dari versi 76, Firefox dari versi 67 dan Safari dari versi 12.1 di macOS, dan dari versi 13 di iOS. Untuk semua browser lainnya, Anda dapat menemukan informasi di artikel Dapatkah saya menggunakan tabel dukungan .
Elemen <dark-mode-toggle> kustom tersedia yang menambahkan dukungan mode gelap ke browser lama. Saya akan menulis tentang ini lebih lanjut.
Mode Gelap dalam Praktek
Mari kita lihat seperti apa dukungan mode gelap dalam praktiknya. Seperti di film "Highlander" , pada akhirnya hanya ada satu: gelap atau terang! Mengapa saya fokus pada ini? Karena fakta ini mempengaruhi strategi pemuatan. Harap jangan memaksa pengguna untuk mengunduh CSS pada tahap rendering kritis untuk mode yang saat ini tidak digunakan. Oleh karena itu, untuk mengoptimalkan kecepatan pemuatan, saya telah membagi CSS saya dalam contoh menjadi tiga bagian untuk menunda pemuatan CSS yang tidak kritis :
- style.css berisi aturan umum yang digunakan di seluruh situs
- dark.css berisi aturan yang diperlukan untuk mode gelap
- light.css berisi aturan yang diperlukan hanya untuk mode cahaya.
Memuat strategi
Dua yang terakhir, light.css dan dark.css, secara selektif dimuat melalui permintaan <link media>.
Awalnya, tidak semua browser mendukung properti media CSS skema warna-warna (ditemukan dengan contoh di atas ), ini diselesaikan dengan memilih light.css default melalui elemen dalam skrip inline kami (terang adalah pilihan sewenang-wenang, saya juga bisa gelap dengan default). Untuk menghindari konten tanpa gaya muncul , saya menyembunyikan konten halaman sampai 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)').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: no-preference), (prefers-color-scheme: light)">
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css">
Arsitektur style sheet
Saya menggunakan variabel CSS , yang memungkinkan style.css menjadi generik, semua pengaturan mode terang atau gelap terjadi di dua file lain: dark.css dan light.css. Di bawah ini adalah contoh yang seharusnya cukup untuk menjelaskan gagasan umum. Saya mendeklarasikan dua variabel, --color dan --background-color, yang 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);
}
Kemudian di style.css saya menggunakan variabel ini di body {...} . Karena mereka ditentukan dalam CSS pseudo-class : root - selektor yang mewakili elemen <html> dalam HTML dan identik dengan pemilih html , kecuali bahwa kekhususannya lebih tinggi: variabel bertingkat, sehingga memungkinkan definisi variabel CSS global.
/* style.css */
:root {
color-scheme: light dark;
}
body {
color: var(--color);
background-color: var(--background-color);
}Pada contoh di atas, Anda mungkin memperhatikan properti skema warna dengan nilai gelap terang dipisahkan oleh spasi.
Properti memberi tahu browser tema warna mana yang didukung aplikasi saya dan memungkinkannya mengaktifkan variasi khusus dari lembar gaya agen pengguna. Ini berguna, misalnya, untuk memungkinkan browser menampilkan bidang formulir dengan latar belakang gelap dan teks terang, menyesuaikan bilah gulir, atau mengaktifkan warna sorotan berbasis tema. Detail properti skema warna ditentukan dalam CSS Color Adjustment Module Level 1 .
Pelajari lebih lanjut tentang skema warna .
Yang lainnya hanyalah gaya CSS untuk sisa markup yang saya miliki di situs saya. Organisasi gaya semantik sangat membantu saat bekerja dengan mode gelap. Misalnya, alih-alih --highlight-yellow, pertimbangkan untuk menamai variabel --accent-color , karena "kuning" mungkin sebenarnya bukan kuning dalam mode gelap, atau sebaliknya. Di bawah ini adalah contoh beberapa variabel lagi yang saya gunakan.
/* 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);
}Analisis rinci
Di kotak Glitch berikut, Anda dapat melihat contoh yang menggunakan semua yang dijelaskan di atas, dalam praktiknya. Coba alihkan mode gelap di pengaturan sistem operasi Anda dan lihat bagaimana halaman bereaksi.
Dampaknya pada kecepatan unduh
Saat Anda cukup bermain dengan contoh ini, Anda dapat melihat mengapa saya memuat dark.css dan light.css saya melalui kueri media. Coba ganti mode gelap dan muat ulang halaman: stylesheet tertentu yang saat ini tidak cocok masih dimuat, tetapi pada prioritas terendah sehingga tidak bersaing dengan sumber daya yang dibutuhkan situs saat ini.
Cari tahu mengapa browser memuat stylesheet dengan kueri media yang tidak cocok .
Situs web terang memuat
gaya gelap dengan prioritas terendah: Situs web gelap memuat gaya terang dengan prioritas terendah:
Situs default dengan tampilan cerah di browser yang tidak mendukung skema warna-lebih memilih memuat gaya gelap dengan prioritas terendah:
Bagaimana menanggapi perubahan mode gelap
Seperti halnya perubahan kueri media, Anda dapat berlangganan perubahan mode gelap melalui JavaScript. Anda dapat menggunakan ini, misalnya, untuk mengubah ikon halaman secara dinamis atau mengubah <meta name = "theme-color"> , yang menentukan warna bilah URL di Chrome. Contoh di atas menunjukkan apa yang dijelaskan dalam tindakan. Untuk melihat tema dan ikon warna berubah, buka demo di tab terpisah .
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addListener((e) => {
const darkModeOn = e.matches;
console.log(`Dark mode is ${darkModeOn ? ' on' : '️ off'}.`);
});Praktik Terbaik Mode Gelap
Hindari
Putih Murni Anda mungkin telah memperhatikan detail kecil: Saya tidak menggunakan putih bersih. Sebagai gantinya, untuk mencegah konten gelap di sekitarnya bersinar, saya memilih putih yang sedikit lebih gelap, seperti rgb (250, 250, 250) .
Mengubah warna dan penggelapan gambar foto
Jika Anda membandingkan dua screenshot di bawah ini, Anda akan melihat bahwa tidak hanya tema utama yang berubah dari gelap ke terang ke terang ke gelap, tetapi gambar terlihat sedikit berbeda. Survei saya menemukan bahwa sebagian besar pengguna lebih menyukai gambar yang sedikit kurang cerah dan jenuh saat mode gelap aktif. Saya menyebutnya pewarnaan ulang.
gambar dalam mode terang Anda dapat mewarnai ulang gambar menggunakan filter CSS. Saya menggunakan pemilih CSS yang cocok untuk semua gambar yang tidak memiliki .svg di url mereka. Idenya adalah saya dapat memberikan grafik vektor (ikon) perlakuan yang berbeda, lebih lanjut tentang itu di bagian selanjutnya . Perhatikan bagaimana saya menggunakan variabel CSS lagi sehingga saya dapat dengan cepat mengubah filter saya nanti.
Pelajari lebih lanjut tentang preferensi pengguna dari penelitian .
Karena pengecatan ulang hanya diperlukan dalam mode gelap, yaitu 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 Mode Gelap dengan JavaScript
Kami berbeda, dan setiap orang akan memiliki ide mereka sendiri tentang bagaimana seharusnya mode gelap terlihat. Dengan tetap berpegang pada metode pewarnaan ulang yang dijelaskan di atas, saya dapat dengan mudah menjadikan intensitas grayscale sebagai preferensi pengguna, yang diubah oleh JavaScript , dan dengan menyetel nilai menjadi 0% , saya dapat menonaktifkan pewarnaan ulang seluruhnya. Perhatikan bahwa document.documentElement menyediakan tautan ke elemen akar dokumen, yang merupakan elemen yang sama yang dapat saya rujuk menggunakan CSS pseudo-class : root .
const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);Balikkan vektor dan ikon
Untuk grafik vektor (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 foto, ini berfungsi sangat baik untuk sebagian besar ikon. Saya sekali lagi menggunakan variabel CSS untuk menentukan tingkat inversi dalam keadaan normal dan : hover .
Ikon terbalik dalam mode gelap:
Ikon dalam mode terang:
Perhatikan bagaimana saya hanya membalikkan ikon dalam dark.css tetapi tidak light.css , dan caranya : hover mendapatkan intensitas pembalikan yang berbeda dalam dua kasus untuk membuat ikon terlihat sedikit lebih gelap atau sedikit lebih cerah, tergantung pada mode yang dipilih oleh 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 sebaris
Daripada menggunakan filter terbalik untuk gambar SVG sebaris, Anda dapat menambahkan kata kunci currentColor , yang mewakili nilai warna elemen.
Ini memungkinkan Anda menyetel nilai warna untuk properti yang tidak menerimanya secara default. Faktanya, jika currentColor digunakan sebagai nilai untuk atribut isian atau goresan SVG, nilai ini diambil dari properti warna yang diwarisi. Ini juga berfungsi untuk <svg> <use href = "…"> </svg> , jadi Anda dapat memiliki sumber daya terpisah dan currentColor akan tetap diterapkan dalam konteks. Perhatikan bahwa ini hanya berfungsi untuk sebaris atau <use href = "...">SVG, tetapi tidak untuk SVG, yang disebut sebagai gambar src atau melalui CSS. Lebih lengkapnya di sini .
<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
>
[…]
</svg>Transisi mulus antar mode
Beralih dari gelap ke terang atau sebaliknya dapat diperhalus karena fakta bahwa warna dan latar belakang adalah properti CSS yang dapat dianimasikan . Animasi semudah mendeklarasikan dua transisi untuk dua properti. Contoh di bawah ini menggambarkan gagasan umum.
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);
}Desain artistik dengan mode gelap
Sementara untuk alasan kinerja pemuatan secara umum, saya sarankan untuk bekerja secara eksklusif dengan skema warna-preferensi di atribut media dari elemen (dan bukan sebaris dalam lembar gaya), ada situasi di mana Anda mungkin benar-benar ingin bekerja dengan skema warna-preferensi sebaris di HTML- Kode. Dekorasi hanyalah situasi seperti itu. Desain artistik - desain visual keseluruhan halaman: bagaimana situs memengaruhi pengguna, perasaan apa yang ditimbulkannya.
Dalam mode gelap, desainer harus memutuskan gambar mana yang akan dipilih dan apakah gambar akan diwarnai ulang.cocok. Dengan menggunakan elemen <picture>, gambar yang ditampilkan <source> dapat dibuat bergantung pada atribut media. Dalam contoh di bawah ini, saya menunjukkan belahan bumi barat untuk mode gelap dan belahan bumi timur untuk mode terang atau, jika tidak ada pengaturan yang ditentukan, tetap defaultnya untuk belahan bumi timur. Gambar tersebut tentu saja hanya menggambarkan contoh saya . 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), (prefers-color-scheme: no-preference)">
<img src="eastern.webp">
</picture>Mode gelap dinonaktifkan
Seperti disebutkan di atas, sebagian besar pengguna memilih Mode Gelap berdasarkan selera dan preferensi estetika mereka. Beberapa pengguna suka melihat UI OS mereka gelap dan halaman web mereka seperti biasanya. Rencana tindakan: pertama-tama tunggu sinyal yang dikirimkan browser melalui skema warna-pilihan, lalu biarkan pengguna mengganti pengaturan tingkat sistem jika mereka mau.
Elemen khusus <dark-mode-toggle>
Tentu saja, Anda dapat membuat kode seperti itu sendiri, tetapi Anda cukup menggunakan elemen siap pakai (komponen web) yang saya buat khusus untuk tujuan ini. Ini disebut <dark-mode-toggle> dan menambahkan sakelar (mode gelap: on / off) atau pengalih tema (tema: terang / gelap) ke halaman Anda yang dapat Anda sesuaikan sepenuhnya. Demo di bawah ini menunjukkan elemen dalam tindakan (oh, dan saya diam-diam menggunakannya di semua contoh lain 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 sentuh kontrol mode gelap di sudut kanan atas pada demo di bawah ini. Jika Anda mencentang kotak di kontrol ketiga dan keempat, lihat bagaimana pilihan mode Anda diingat bahkan di seluruh halaman yang dimuat ulang. Ini memungkinkan pengunjung Anda untuk mempertahankan sistem operasi mereka dalam mode gelap, tetapi menikmati situs Anda dalam mode terang, atau sebaliknya.
Kesimpulan
Bekerja dengan dan mempertahankan Mode Gelap itu menyenangkan! Kemungkinan baru untuk desain terbuka. Memilih mode gelap dapat membuat pengguna Anda lebih bahagia. Ya, ada kendala dan pengujian yang ketat diperlukan, tetapi mode gelap adalah peluang bagus untuk menunjukkan bahwa Anda peduli dengan pengguna Anda. Praktik terbaik yang disebutkan dalam artikel ini dan peretasan seumur hidup seperti elemen <dark-mode-toggle> khusus akan membantu Anda membuat mode gelap yang mengagumkan.
tautan berguna
Kueri media skema warna-warna :
Tag meta skema warna :
- Halaman Status Platform Chrome
- Bug Chromium
- Spesifikasi CSS Color Adjustment Module Level 1
- Masalah CSS WG GitHub untuk tag meta dan properti CSS
- HTML WHATWG GitHub Issue for the meta tag
dark mode:
- Material Design — Dark Theme
- Dark Mode in Web Inspector
- Dark Mode Support in WebKit
- Apple Human Interface Guidelines — Dark Mode
: