डार्क मोड रीलोड के साथ व्हाइट फ़्लिकरिंग समस्या

एक डार्क मोड सुविधा को लागू करते समय जो दृढ़ता के लिए स्थानीय भंडारण का लाभ उठाता है, एक आम समस्या का सामना करना पड़ता है पृष्ठ पुनः लोड करने पर सफेद पृष्ठभूमि की झिलमिलाहट। ऐसा इसलिए होता है क्योंकि 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);
});

इस समाधान को लागू करके, आप सफेद झिलमिलाहट को रोक सकते हैं और पृष्ठ पुनः लोड होने पर प्रकाश और अंधेरे मोड के बीच एक निर्बाध संक्रमण सुनिश्चित कर सकते हैं।