𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗗𝗮𝗿𝗸 𝗠𝗼𝗱𝗲 𝗶𝗻 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝘁𝗵𝗲 𝗙𝗹𝗮𝘀𝗵 Next.js میں بغیر کسی فلیش (flash) کے ڈارک موڈ بنانا
ڈارک موڈ سادہ معلوم ہوتا ہے۔ پھر آپ کو فلیش نظر آتا ہے۔
جب کوئی صارف آپ کا پیج لوڈ کرتا ہے، تو سرور ڈیفالٹ تھیم بھیجتا ہے۔ ڈارک تھیم لاگو ہونے سے پہلے صارف کو ایک لمحے کے لیے سفید اسکرین نظر آتی ہے۔ یہ ایک برا یوزر ایکسپیرینس (user experience) ہے۔
یہ مسئلہ اس لیے ہوتا ہے کیونکہ سرور localStorage کو نہیں پڑھ سکتا۔ سرور کو تھیم کا علم صرف اس وقت ہوتا ہے جب براؤزر آپ کا JavaScript چلا دیتا ہے۔
اسے ٹھیک کرنے کا طریقہ یہ ہے:
The Solution: The Inline Script حل: ان لائن اسکرپٹ (The Inline Script)
آپ کو React کے شروع ہونے سے پہلے تھیم لاگو کرنی ہوگی۔ اپنے
ٹیگ میں ایک چھوٹا سا اسکرپٹ رکھیں۔ یہ اسکرپٹ ترجیحات (preference) کو پڑھتا ہے اور فوری طور پر dark class شامل کر دیتا ہے۔ان مراحل پر عمل کریں:
- localStorage چیک کرنے کے لیے اپنے RootLayout میں ایک اسکرپٹ شامل کریں۔
- اپنے ٹیگ پر suppressHydrationWarning کا استعمال کریں۔ یہ React کو تھیم کے فرق (mismatch) کے بارے میں شکایت کرنے سے روکتا ہے۔
- اسٹیٹ (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: ایک ایسا کمپوننٹ استعمال کریں جو تھیم کو چیک کرے اور صحیح امیج سورس کا انتخاب کرے۔
Pro Tip for Server-Side Content سرور سائیڈ مواد کے لیے پرو ٹپ (Pro Tip)
اگر آپ کو چارٹس یا بھاری مواد کے لیے سرور کو تھیم کا علم ہونا ضروری ہے، تو localStorage کے بجائے کوکیز (cookies) کا استعمال کریں۔
- تھیم کو ایک کوکی میں اسٹور کریں۔
- اس کوکی کو پڑھنے کے لیے Next.js middleware کا استعمال کریں۔
- ہیڈرز (headers) کے ذریعے اپنی لے آؤٹ (layout) کو تھیم پاس کریں۔
یہ سرور کو شروع سے ہی درست HTML بھیجنے کی اجازت دیتا ہے۔
Summary for a flash-free system: فلیش سے پاک سسٹم کے لیے خلاصہ: •
میں ایک ان لائن اسکرپٹ استعمال کریں • suppressHydrationWarning کا استعمال کریں • Context Provider کے ساتھ اسٹیٹ مینیج کریں • سسٹم کی ترجیحات (system preference) میں تبدیلیوں پر نظر رکھیںیہ طریقہ پروڈکشن ایپس کے لیے بہترین ہے۔ یہ فوری سوئچنگ اور زیرو فلیش (zero flashes) کو یقینی بناتا ہے۔