Next.jsలో ఫ్లాష్ లేకుండా డార్క్ మోడ్ను నిర్మించడం
డార్క్ మోడ్ సరళంగా అనిపిస్తుంది. కానీ అప్పుడే ఆ 'ఫ్లాష్' కనిపిస్తుంది.
వినియోగదారు మీ పేజీని లోడ్ చేసినప్పుడు, సర్వర్ డిఫాల్ట్ థీమ్ను పంపుతుంది. డార్క్ థీమ్ అమలు కావడానికి ముందు, వినియోగదారు ఒక క్షణం పాటు తెల్లటి స్క్రీన్ను చూస్తారు. ఇది ఒక చెడ్డ యూజర్ ఎక్స్పీరియన్స్.
సర్వర్ localStorageను చదవలేకపోవడం వల్ల ఈ సమస్య ఏర్పడుతుంది. బ్రౌజర్ మీ JavaScriptను రన్ చేసిన తర్వాత మాత్రమే సర్వర్కు థీమ్ గురించి తెలుస్తుంది.
దీన్ని ఎలా పరిష్కరించాలో ఇక్కడ ఉంది.
The Solution: The Inline Script
React ప్రారంభం కావడానికి ముందే మీరు థీమ్ను అన్వయించాలి. మీ <head> ట్యాగ్లో ఒక చిన్న స్క్రిప్ట్ను ఉంచండి. ఈ స్క్రిప్ట్ యూజర్ ప్రాధాన్యతను చదివి, వెంటనే dark క్లాస్ను జోడిస్తుంది.
ఈ దశలను అనుసరించండి:
localStorageను తనిఖీ చేయడానికి మీ RootLayout<head>లో ఒక స్క్రిప్ట్ను జోడించండి.- మీ
<html>ట్యాగ్పైsuppressHydrationWarningను ఉపయోగించండి. ఇది థీమ్ మిస్మ్యాచ్ గురించి React ఫిర్యాదు చేయకుండా నిరోధిస్తుంది. - స్టేట్ను నిర్వహించడానికి మరియు
localStorageతో సింక్ చేయడానికిThemeProviderను ఉపయోగించండి. - స్మూత్ కలర్ ట్రాన్సిషన్ల కోసం Tailwindతో CSS variables ఉపయోగించండి.
Why this works: ఈ స్క్రిప్ట్ పేజీ రెండర్ కావడానికి ముందే రన్ అవుతుంది. ఇది విజువల్ జంప్ను నివారిస్తుంది.
Handling Images
లైట్ మరియు డార్క్ మోడ్ల కోసం తరచుగా వేర్వేరు ఇమేజ్లు అవసరమవుతాయి. మీకు రెండు ఎంపికలు ఉన్నాయి:
- CSS Method:
.darkక్లాస్ ఆధారంగా ఇమేజ్లను మార్చడానికిdisplay: noneమరియుdisplay: blockఉపయోగించండి. ఇది అత్యంత వేగవంతమైన మార్గం. - Client Method: థీమ్ను తనిఖీ చేసి, సరైన ఇమేజ్ సోర్స్ను ఎంచుకునే ఒక కాంపోనెంట్ను ఉపయోగించండి.
Pro Tip for Server-Side Content
చార్ట్లు లేదా భారీ కంటెంట్ కోసం సర్వర్కు థీమ్ తెలియాల్సి వస్తే, localStorageకు బదులుగా కుకీలను (cookies) ఉపయోగించండి.
- థీమ్ను కుకీలో నిల్వ చేయండి.
- ఆ కుకీని చదవడానికి Next.js middleware ఉపయోగించండి.
- హెడర్స్ (headers) ద్వారా మీ లేఅవుట్కు థీమ్ను పంపండి.
ఇది సర్వర్ ప్రారంభం నుంచే సరైన HTMLను పంపడానికి అనుమతిస్తుంది.
Summary for a flash-free system:
• <head>లో ఇన్లైన్ స్క్రిప్ట్ను ఉపయోగించండి
• suppressHydrationWarningను ఉపయోగించండి
• Context Providerతో స్టేట్ను నిర్వహించండి
• సిస్టమ్ ప్రాధాన్యత మార్పులను గమనించండి
ఈ విధానం ప్రొడక్షన్ యాప్లకు సరిపోతుంది. ఇది తక్షణ మార్పును మరియు సున్నా ఫ్లాష్లను నిర్ధారిస్తుంది.