Flash of Tema Warna yang tidak tepat (kentut)

Terdapat banyak perkara yang perlu difikirkan ketika melaksanakan tema mod gelap di laman web. Kami mempunyai panduan besar di atasnya. Terdapat beberapa kemenangan yang sangat pandai di luar sana, tetapi terdapat juga beberapa perkara yang agak rumit untuk ditarik. Salah satu perkara yang rumit adalah bagaimana ia bukan mod gelap "bertukar" antara gelap dan cahaya, tetapi benar -benar tiga mod yang anda perlukan untuk menyokong: keutamaan sistem gelap , ringan , dan menggunakan. Itu serupa dengan bagaimana pilihan audio berfungsi dalam banyak aplikasi, yang membolehkan anda memilih secara khusus input atau output audio yang anda inginkan, atau lalai kepada keutamaan sistem.

CSS dan JavaScript boleh mengendalikan sudut keutamaan sistem, melalui API yang lebih suka warna-warna, tetapi jika keutamaan pengguna telah berubah, dan keutamaan itu sekarang berbeza daripada keutamaan pengguna, anda berada di wilayah "Tema Warna Tidak Dipertua" atau kentut. Ok ok, ia adalah akronim tounge-in-cheek, tetapi ia berpotensi agak masalah visual yang menjengkelkan sehingga saya menyimpannya. Ia berada dalam urat yang sama yang Fout (Flash of Unstyled Text) adalah untuk pemuatan fon.

Menyimpan keutamaan pengguna bermaksud sesuatu seperti cookie, localStorage, atau beberapa jenis pangkalan data. Sekiranya akses kepada data itu bermakna menjalankan JavaScript, misalnya localStorage.getItem ('Warna-Mode-Preference');, maka anda berada di wilayah kentut, kerana JavaScript anda sangat mungkin berjalan selepas halaman pertama halaman, supaya anda tidak dapat melambatkan halaman.

Anda boleh mengakses kuki dengan bahasa pelayan sebelum membuat halaman, yang bermaksud anda boleh menggunakannya untuk mengeluarkan sesuatu seperti dan gaya dengan sewajarnya, yang dengan cekap mengelakkan kentut, tetapi itu bermakna tapak yang bahkan mempunyai akses kepada bahasa sisi pelayan (tapak jamStack tidak, misalnya).

Allllll itu untuk mengatakan bahawa saya menghargai artikel Rob Morieson tentang Mode Dark kerana ia tidak menonjolkan isu penting ini. Ia sangat khusus untuk melakukan ini di Next.js, dan menggunakan LocalStorage, tetapi kerana Next.js adalah JavaScript yang diberikan, anda boleh memaksanya untuk menyemak keutamaan pengguna sebagai perkara pertama yang dilakukannya. Ini bermakna ia akan menjadikan dengan betul pada kali pertama (tiada kilat). Anda perlu mematikan rendering sisi pelayan untuk ini berfungsi, yang merupakan perdagangan yang gnarly walaupun.

Saya tidak yakin ada cara yang baik untuk mengelakkan kentut tanpa bahasa pelayan atau halaman yang ditangguhkan.

Atas ialah kandungan terperinci Flash of Tema Warna yang tidak tepat (kentut). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!