Flash Tema warna tidak Akurat (FART)

Ada banyak hal yang harus dipikirkan saat menerapkan tema mode gelap di situs web. Kami memiliki panduan besar di dalamnya. Ada beberapa kemenangan cepat yang sangat cerdas di luar sana, tetapi ada juga beberapa hal yang cukup rumit untuk dilakukan. Salah satu hal rumit itu adalah bagaimana ini bukan mode gelap yang "beralih" antara gelap dan terang, tetapi sebenarnya tiga mode yang perlu Anda dukung: gelap , terang , dan menggunakan preferensi sistem . Itu mirip dengan cara kerja preferensi audio di banyak aplikasi, yang memungkinkan Anda secara khusus memilih masukan atau keluaran audio yang Anda inginkan, atau default ke preferensi sistem.

CSS dan JavaScript dapat menangani sudut preferensi sistem, melalui prefers-color-scheme preferensi, tetapi jika preferensi pengguna telah berubah, dan preferensi tersebut sekarang berbeda dari preferensi pengguna, Anda berada di wilayah “Flash of inAccurate coloR Theme ”atau FART. Ok ok, ini adalah akronim tounge-in-cheek, tapi berpotensi menjadi masalah yang cukup menjengkelkan secara visual jadi saya menyimpannya. Ini dalam nada yang sama dengan FOUT (Flash of Unstyled Text) untuk memuat font.

Menyimpan preferensi pengguna berarti sesuatu seperti cookie, localStorage , atau semacam database. Jika akses ke data itu berarti menjalankan JavaScript, misalnya localStorage.getItem('color-mode-preference'); , maka Anda berada di wilayah FART, karena JavaScript Anda kemungkinan besar berjalan setelah halaman dirender pertama kali, jangan sampai Anda menunda rendering halaman secara tidak perlu.

Preferensi pengguna adalah mode "gelap", tetapi preferensi sistem adalah mode "terang" (atau tidak disetel), jadi saat halaman disegarkan, Anda terkena FART.

Anda dapat mengakses cookie dengan bahasa sisi server sebelum perenderan halaman, yang berarti Anda dapat menggunakannya untuk menghasilkan sesuatu seperti <html class="user-setting-dark-mode"> dan menyesuaikan gaya, yang dengan cekatan menghindari FART, tetapi itu berarti situs yang bahkan memiliki akses ke bahasa sisi server (situs Jamstack tidak, misalnya).

Semua itu untuk mengatakan bahwa saya menghargai artikel Rob Morieson tentang mode gelap karena tidak membahas masalah penting ini. Ini sangat khusus tentang melakukan ini di Next.js, dan menggunakan localStorage , tetapi karena Next.js adalah JavaScript-render, Anda dapat memaksanya untuk memeriksa preferensi yang disimpan pengguna sebagai hal pertama yang dilakukannya. Itu berarti ini akan dirender dengan benar pertama kali (tanpa flash). Anda memang harus mematikan rendering sisi server agar ini berfungsi, yang merupakan trade-off yang berat.

Saya tidak yakin ada cara yang baik untuk menghindari FART tanpa bahasa sisi server atau render halaman yang ditunda paksa.


Postingan Flash of inAccurate coloR Theme (FART) muncul pertama kali di CSS-Tricks .

Anda dapat mendukung CSS-Tricks dengan menjadi Supporter MVP .

April 16, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *