Next.js मध्ये 'फ्लॅश' (flash) शिवाय डार्क मोड तयार करणे

डार्क मोड सोपा वाटतो. पण मग तुम्हाला तो 'फ्लॅश' दिसतो.

जेव्हा एखादा वापरकर्ता तुमचे पेज लोड करतो, तेव्हा सर्व्हर डिफॉल्ट थीम पाठवतो. डार्क थीम लागू होण्यापूर्वी वापरकर्त्याला काही क्षणांसाठी पांढरा स्क्रीन दिसतो. हा एक खराब युजर एक्सपिरियन्स (user experience) आहे.

ही समस्या उद्भवते कारण सर्व्हर localStorage वाचू शकत नाही. ब्राउझर तुमची JavaScript रन केल्यानंतरच सर्व्हरला थीमबद्दल समजते.

यावर उपाय खालीलप्रमाणे आहे.

उपाय: इनलाइन स्क्रिप्ट (The Inline Script)

React सुरू होण्यापूर्वीच तुम्हाला थीम लागू करावी लागेल. तुमच्या <head> टॅगमध्ये एक छोटी स्क्रिप्ट टाका. ही स्क्रिप्ट युजरची पसंती (preference) वाचते आणि लगेच dark क्लास जोडते.

या स्टेप्स वापरा:

  • localStorage तपासण्यासाठी तुमच्या RootLayout <head> मध्ये एक स्क्रिप्ट जोडा.
  • तुमच्या <html> टॅगवर suppressHydrationWarning वापरा. यामुळे थीममधील तफावतीबद्दल (mismatch) React कडून येणाऱ्या त्रुटी थांबतात.
  • स्टेट (state) मॅनेज करण्यासाठी आणि localStorage सोबत सिंक करण्यासाठी ThemeProvider वापरा.
  • स्मूथ कलर ट्रान्झिशनसाठी Tailwind सोबत CSS variables वापरा.

हे का काम करते: ही स्क्रिप्ट पेज रेंडर होण्यापूर्वीच रन होते. यामुळे व्हिज्युअल जंप (visual jump) टाळता येतो.

इमेज हाताळणे (Handling Images)

लाईट आणि डार्क मोडसाठी अनेकदा वेगवेगळ्या इमेजेसची गरज असते. तुमच्याकडे दोन पर्याय आहेत:

  • CSS पद्धत: .dark क्लासवर आधारित इमेजेस बदलण्यासाठी display: none आणि display: block वापरा. हा सर्वात वेगवान मार्ग आहे.
  • क्लायंट पद्धत: अशी एक कंपोनंट वापरा जी थीम तपासते आणि योग्य इमेज सोर्स निवडते.

सर्व्हर-साइड कंटेंटसाठी प्रो टिप (Pro Tip)

जर तुम्हाला चार्ट्स किंवा जड कंटेंटसाठी सर्व्हरला थीम माहित असणे आवश्यक असेल, तर localStorage ऐवजी कुकीज (cookies) वापरा.

  • थीम कुकीमध्ये स्टोअर करा.
  • ती कुकी वाचण्यासाठी Next.js middleware वापरा.
  • हेडर्सद्वारे (headers) तुमची थीम लेआउटला पास करा.

यामुळे सर्व्हर सुरुवातीपासूनच योग्य HTML पाठवू शकतो.

फ्लॅश-मुक्त सिस्टमसाठी सारांश: • <head> मध्ये इनलाइन स्क्रिप्ट वापरा • suppressHydrationWarning वापरा • Context Provider सह स्टेट मॅनेज करा • सिस्टम प्रेफरन्समधील बदलांवर लक्ष ठेवा (Listen for system preference changes)

हा दृष्टिकोन प्रोडक्शन ॲप्ससाठी योग्य आहे. यामुळे त्वरित स्विचिंग आणि शून्य फ्लॅश सुनिश्चित होतो.

स्रोत: https://dev.to/aon_infotech_3a1b6ff525fc/building-a-dark-mode-system-in-nextjs-app-router-without-layout-flash-5gf9