خیلی از وب‌سایت‌ها برای پیاده‌سازی دارک‌مود از جاوااسکریپت یا LocalStorage استفاده می‌کنن.
مشکل این روش چیه؟ وقتی کاربر صفحه رو باز میکنه، سایت اول چند لحظه سفید لود میشه (حالت پیش‌فرض) و بعد از اینکه کد جاوااسکریپت اجرا شد، تازه صفحه سیاه میشه. 🌚
این پرشِ ناگهانی نور (Flash of Light Mode) قشنگ چشم کاربر رو کور میکنه!
🫰🏻 برای حل این مشکل، بهترین راه اینه که کار رو بسپرید دست خود مرورگر. با استفاده از قابلیت prefers-color-scheme در CSS، مرورگر قبل از اینکه حتی یک پیکسل از صفحه رو رندر کنه، وضعیت تمِ سیستم‌عامل (گوشی یا کامپیوتر) کاربر رو می‌خونه و استایل درست رو بدون ۱ میلی‌ثانیه تأخیر یا پرش اعمال میکنه!
کدش به همین سادگیه:
/* استایل پیش‌فرض (حالت روشن) */
body {
background-color: #ffffff;
color: #333333;
}
/* تشخیص خودکار دارک‌مود سیستم‌عامل */
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #ffffff;
}
}
خلاصه:
با این ترفند، اگه تم گوشی کاربر دارک باشه، سایت شما هم از همون ثانیه اول دارک لود میشه، بدون اینکه نیاز باشه کاربر روی دکمه‌ای کلیک کنه یا منتظر اجرای کدهای سنگین جاوااسکریپت بمونه.📌 این پست رو برای رفقای برنامه‌نویس‌تون بفرستید یا توی Saved Messages ذخیره کنید که بعداً به کارتون میاد. ❤️
🪽 Fachlich
🍃 @ITSecurityComputer