𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗗𝗮𝗿𝗸 𝗠𝗼𝗱𝗲 𝗶𝗻 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝘁𝗵𝗲 𝗙𝗹𝗮𝘀𝗵

டார்க் மோட் (Dark mode) பார்ப்பதற்கு எளிமையாகத் தோன்றலாம். ஆனால், திடீரென ஒரு பிளாஷ் (flash) தோன்றும்.

ஒரு பயனர் உங்கள் பக்கத்தைப் பதிவிறக்கும்போது, சர்வர் இயல்புநிலை தீமை (default theme)-ஐ அனுப்பும். டார்க் தீம் செயல்படுவதற்கு முன், ஒரு நொடிப் பொழுதில் பயனர் ஒரு வெள்ளைத் திரையைப் பார்ப்பார். இது ஒரு மோசமான பயனர் அனுபவம் (user experience).

சர்வரால் localStorage-ஐப் படிக்க முடியாது என்பதால் இந்தப் பிரச்சனை ஏற்படுகிறது. பிரவுசர் உங்கள் JavaScript-ஐ இயக்கிய பின்னரே சர்வரால் தீமை (theme) பற்றித் தெரியவரும்.

இதைச் சரிசெய்வது எப்படி என்பது இதோ.

The Solution: The Inline Script

React தொடங்குவதற்கு முன்பே நீங்கள் தீமை (theme)-ஐப் பயன்படுத்த வேண்டும். உங்கள் <head> டேக்கில் ஒரு சிறிய ஸ்கிரிப்டைச் சேர்க்கவும். இந்த ஸ்கிரிப்ட் பயனரின் விருப்பத்தைப் படித்து, உடனடியாக dark class-ஐச் சேர்க்கும்.

இந்த வழிமுறைகளைப் பயன்படுத்தவும்:

  • localStorage-ஐச் சரிபார்க்க உங்கள் RootLayout <head>-இல் ஒரு ஸ்கிரிப்டைச் சேர்க்கவும்.
  • உங்கள் <html> டேக்கில் suppressHydrationWarning-ஐப் பயன்படுத்தவும். இது தீமை மாறுபாட்டைப் (theme mismatch) பற்றி React புகார் கூறுவதைத் தடுக்கும்.
  • நிலை (state) மற்றும் localStorage-உடன் ஒருங்கிணைக்க (sync) ஒரு ThemeProvider-ஐப் பயன்படுத்தவும்.
  • மென்மையான நிற மாற்றங்களுக்கு (color transitions) Tailwind உடன் CSS variables-ஐப் பயன்படுத்தவும்.

Why this works: பக்கம் ரெண்டர் (render) ஆவதற்கு முன்பே இந்த ஸ்கிரிப்ட் இயங்கும். இது அந்தத் திடீர் மாற்றத்தைத் (visual jump) தவிர்க்கிறது.

Handling Images

லைட் மற்றும் டார்க் மோடுகளுக்குப் படங்கள் பெரும்பாலும் வெவ்வேறு பதிப்புகளாகத் தேவைப்படும். உங்களிடம் இரண்டு தேர்வுகள் உள்ளன:

  • CSS Method: .dark class-இன் அடிப்படையில் படங்களை மாற்ற display: none மற்றும் display: block ஆகியவற்றைப் பயன்படுத்தவும். இதுவே மிக வேகமான வழி.
  • Client Method: தீமை (theme)-ஐச் சரிபார்த்து சரியான பட ஆதாரத்தைத் (image source) தேர்ந்தெடுக்கும் ஒரு காம்பொனென்ட்டைப் (component) பயன்படுத்தவும்.

Pro Tip for Server-Side Content

சார்ட்டுகள் (charts) அல்லது அதிகப்படியான உள்ளடக்கங்களுக்கு சர்வர் தீமை (theme) பற்றித் தெரிந்துகொள்ள வேண்டும் என்றால், localStorage-க்கு பதிலாக குக்கீகளைப் (cookies) பயன்படுத்தவும்.

  • தீமை (theme)-ஐ ஒரு குக்கீயில் சேமிக்கவும்.
  • அந்த குக்கீயைப் படிக்க Next.js middleware-ஐப் பயன்படுத்தவும்.
  • ஹெடர்கள் (headers) மூலம் உங்கள் லேஅவுட்டிற்கு (layout) தீமை (theme)-ஐ அனுப்பவும்.

இது ஆரம்பத்திலிருந்தே சர்வர் சரியான HTML-ஐ அனுப்ப அனுமதிக்கும்.

Summary for a flash-free system: • <head>-இல் ஓர் இன்லைன் ஸ்கிரிப்டைப் பயன்படுத்தவும் • suppressHydrationWarning-ஐப் பயன்படுத்தவும் • Context Provider மூலம் நிலையை (state) நிர்வகிக்கவும் • சிஸ்டம் விருப்ப மாற்றங்களைக் கவனிக்கவும் (Listen for system preference changes)

இந்த அணுகுமுறை ப்ரொடக்ஷன் ஆப்ஸ்களுக்கு (production apps) ஏற்றது. இது உடனடி மாற்றத்தையும், பிளாஷ் இல்லாத அனுபவத்தையும் உறுதி செய்கிறது.

Source: https://dev.to/aon_infotech_3a1b6ff525fc/building-a-dark-mode-system-in-nextjs-app-router-without-layout-flash-5gf9