Next.js ਵਿੱਚ ਬਿਨਾਂ ਫਲੈਸ਼ ਦੇ ਡਾਰਕ ਮੋਡ ਬਣਾਉਣਾ
ਡਾਰਕ ਮੋਡ ਸਧਾਰਨ ਲੱਗਦਾ ਹੈ। ਫਿਰ ਤੁਹਾਨੂੰ ਫਲੈਸ਼ (flash) ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।
ਜਦੋਂ ਕੋਈ ਯੂਜ਼ਰ ਤੁਹਾਡਾ ਪੇਜ ਲੋਡ ਕਰਦਾ ਹੈ, ਤਾਂ ਸਰਵਰ ਡਿਫੌਲਟ ਥੀਮ ਭੇਜਦਾ ਹੈ। ਡਾਰਕ ਥੀਮ ਲਾਗੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਯੂਜ਼ਰ ਨੂੰ ਇੱਕ ਪਲ ਲਈ ਚਿੱਟੀ ਸਕ੍ਰੀਨ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ। ਇਹ ਇੱਕ ਮਾੜਾ ਯੂਜ਼ਰ ਐਕਸਪੀਰੀਅੰਸ ਹੈ।
ਇਹ ਸਮੱਸਿਆ ਇਸ ਲਈ ਹੁੰਦੀ ਹੈ ਕਿਉਂਕਿ ਸਰਵਰ localStorage ਨੂੰ ਨਹੀਂ ਪੜ੍ਹ ਸਕਦਾ। ਸਰਵਰ ਨੂੰ ਥੀਮ ਬਾਰੇ ਉਦੋਂ ਹੀ ਪਤਾ ਲੱਗਦਾ ਹੈ ਜਦੋਂ ਬ੍ਰਾਊਜ਼ਰ ਤੁਹਾਡਾ JavaScript ਚਲਾਉਂਦਾ ਹੈ।
ਇੱਥੇ ਇਸ ਨੂੰ ਠੀਕ ਕਰਨ ਦਾ ਤਰੀਕਾ ਦਿੱਤਾ ਗਿਆ ਹੈ।
ਹੱਲ: ਇਨਲਾਈਨ ਸਕ੍ਰਿਪਟ
ਤੁਹਾਨੂੰ React ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਥੀਮ ਲਾਗੂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। ਆਪਣੇ <head> ਟੈਗ ਵਿੱਚ ਇੱਕ ਛੋਟੀ ਜਿਹੀ ਸਕ੍ਰਿਪਟ ਪਾਓ। ਇਹ ਸਕ੍ਰਿਪਟ ਪਸੰਦ (preference) ਨੂੰ ਪੜ੍ਹਦੀ ਹੈ ਅਤੇ ਤੁਰੰਤ dark ਕਲਾਸ ਜੋੜ ਦਿੰਦੀ ਹੈ।
ਇਨ੍ਹਾਂ ਕਦਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ:
localStorageਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਆਪਣੇRootLayout<head>ਵਿੱਚ ਇੱਕ ਸਕ੍ਰਿਪਟ ਜੋੜੋ।- ਆਪਣੇ
<html>ਟੈਗ 'ਤੇsuppressHydrationWarningਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ React ਨੂੰ ਥੀਮ ਮਿਸਮੈਚ ਬਾਰੇ ਸ਼ਿਕਾਇਤ ਕਰਨ ਤੋਂ ਰੋਕਦਾ ਹੈ। - ਸਟੇਟ (state) ਨੂੰ ਮੈਨੇਜ ਕਰਨ ਅਤੇ
localStorageਨਾਲ ਸਿੰਕ ਕਰਨ ਲਈ ਇੱਕThemeProviderਦੀ ਵਰਤੋਂ ਕਰੋ। - ਸੁਚਾਰੂ ਰੰਗ ਤਬਦੀਲੀਆਂ (color transitions) ਲਈ Tailwind ਦੇ ਨਾਲ CSS variables ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਇਹ ਕਿਉਂ ਕੰਮ ਕਰਦਾ ਹੈ: ਸਕ੍ਰਿਪਟ ਪੇਜ ਰੈਂਡਰ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਚੱਲਦੀ ਹੈ। ਇਹ ਵਿਜ਼ੂਅਲ ਜੰਪ ਨੂੰ ਰੋਕਦੀ ਹੈ।
ਇਮੇਜਾਂ ਨੂੰ ਸੰਭਾਲਣਾ
ਲਾਈਟ ਅਤੇ ਡਾਰਕ ਮੋਡ ਲਈ ਅਕਸਰ ਇਮੇਜਾਂ ਦੇ ਵੱਖ-ਵੱਖ ਵਰਜਨਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਤੁਹਾਡੇ ਕੋਲ ਦੋ ਚੋਣਾਂ ਹਨ:
- CSS ਵਿਧੀ:
.darkਕਲਾਸ ਦੇ ਅਧਾਰ 'ਤੇ ਇਮੇਜਾਂ ਨੂੰ ਬਦਲਣ ਲਈdisplay: noneਅਤੇdisplay: blockਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਸਭ ਤੋਂ ਤੇਜ਼ ਤਰੀਕਾ ਹੈ। - ਕਲਾਇੰਟ ਵਿਧੀ: ਇੱਕ ਅਜਿਹੇ ਕੰਪੋਨੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰੋ ਜੋ ਥੀਮ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ ਅਤੇ ਸਹੀ ਇਮੇਜ ਸੋਰਸ ਚੁਣਦਾ ਹੈ।
ਸਰਵਰ-ਸਾਈਡ ਕੰਟੈਂਟ ਲਈ ਪ੍ਰੋ ਟਿਪ
ਜੇਕਰ ਤੁਹਾਨੂੰ ਚਾਰਟਸ ਜਾਂ ਭਾਰੀ ਕੰਟੈਂਟ ਲਈ ਸਰਵਰ ਨੂੰ ਥੀਮ ਬਾਰੇ ਪਤਾ ਲਗਾਉਣ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ localStorage ਦੀ ਬਜਾਏ ਕੂਕੀਜ਼ (cookies) ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਥੀਮ ਨੂੰ ਇੱਕ ਕੂਕੀ ਵਿੱਚ ਸਟੋਰ ਕਰੋ।
- ਉਸ ਕੂਕੀ ਨੂੰ ਪੜ੍ਹਨ ਲਈ Next.js middleware ਦੀ ਵਰਤੋਂ ਕਰੋ।
- headers ਰਾਹੀਂ ਆਪਣੀ ਲੇਆਉਟ ਨੂੰ ਥੀਮ ਪਾਸ ਕਰੋ।
ਇਹ ਸਰਵਰ ਨੂੰ ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਸਹੀ HTML ਭੇਜਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
ਫਲੈਸ਼-ਮੁਕਤ ਸਿਸਟਮ ਲਈ ਸਾਰਾਂਸ਼:
• <head> ਵਿੱਚ ਇੱਕ ਇਨਲਾਈਨ ਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰੋ
• suppressHydrationWarning ਦੀ ਵਰਤੋਂ ਕਰੋ
• Context Provider ਨਾਲ ਸਟੇਟ ਮੈਨੇਜ ਕਰੋ
• ਸਿਸਟਮ ਦੀਆਂ ਪਸੰਦਾਂ (preferences) ਵਿੱਚ ਬਦਲਾਅ 'ਤੇ ਨਜ਼ਰ ਰੱਖੋ
ਇਹ ਪਹੁੰਚ ਪ੍ਰੋਡਕਸ਼ਨ ਐਪਸ ਲਈ ਕੰਮ ਕਰਦੀ ਹੈ। ਇਹ ਤੁਰੰਤ ਬਦਲਾਅ ਅਤੇ ਜ਼ੀਰੋ ਫਲੈਸ਼ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ।