مشكلة الوميض الأبيض مع إعادة تحميل الوضع الداكن

عند تنفيذ ميزة الوضع المظلم التي تعزز التخزين المحلي للاستمرارية، هناك مشكلة شائعة تواجهها هي وميض خلفية بيضاء عند إعادة تحميل الصفحة. يحدث هذا لأن محلل DOM يعرض الصفحة عادةً قبل تطبيق أنماط الوضع المظلم.

الحل: حظر عرض الصفحة

لحل هذه المشكلة، يمكننا حظر الصفحة يتم العرض باستخدام برنامج نصي صغير يتم وضعه داخل

ضع البرنامج النصي التالي داخل

بعد ذلك، انقل جميع البرامج النصية الأخرى بطريقة لا تؤدي إلى حظر العرض مباشرةً قبل علامة الإغلاق :

أخيرًا، في ملف js/index.js، استخدم الكود التالي:

const elToggleTheme = document.querySelector('#dark-mode-button input[type="checkbox"]');

elToggleTheme.checked = localStorage.theme === "dark";

elToggleTheme.addEventListener("change", () => {
  const theme = elToggleTheme.checked ? "dark" : "light";
  setTheme(theme);
});

من خلال تنفيذ هذا الحل، يمكنك منع الوميض الأبيض وضمان الانتقال السلس بين الوضعين الفاتح والداكن عند إعادة تحميل الصفحة.