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

ಡಾರ್ಕ್ ಮೋಡ್ (Dark mode) ಸರಳವಾಗಿ ಕಾಣಿಸುತ್ತದೆ. ಆದರೆ ನಂತರ ನೀವು ಫ್ಲ್ಯಾಶ್ (flash) ಅನ್ನು ನೋಡುತ್ತೀರಿ.

ಬಳಕೆದಾರರು ನಿಮ್ಮ ಪುಟವನ್ನು ಲೋಡ್ ಮಾಡಿದಾಗ, ಸರ್ವರ್ ಡಿಫಾಲ್ಟ್ ಥೀಮ್ ಅನ್ನು ಕಳುಹಿಸುತ್ತದೆ. ಡಾರ್ಕ್ ಥೀಮ್ ಅನ್ವಯವಾಗುವ ಮೊದಲು ಬಳಕೆದಾರರು ಒಂದು ಕ್ಷಣ ಬಿಳಿ ಪರದೆಯನ್ನು ನೋಡುತ್ತಾರೆ. ಇದು ಕೆಟ್ಟ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು (user experience) ನೀಡುತ್ತದೆ.

ಸರ್ವರ್‌ಗೆ localStorage ಅನ್ನು ಓದಲು ಸಾಧ್ಯವಾಗದ ಕಾರಣ ಈ ಸಮಸ್ಯೆ ಉಂಟಾಗುತ್ತದೆ. ಬ್ರೌಸರ್ ನಿಮ್ಮ JavaScript ಅನ್ನು ರನ್ ಮಾಡಿದ ನಂತರವಷ್ಟೇ ಸರ್ವರ್‌ಗೆ ಥೀಮ್ ಬಗ್ಗೆ ತಿಳಿಯುತ್ತದೆ.

ಇದನ್ನು ಸರಿಪಡಿಸುವುದು ಹೇಗೆ ಎಂಬುದು ಇಲ್ಲಿದೆ.

ಪರಿಹಾರ: ಇನ್‌ಲೈನ್ ಸ್ಕ್ರಿಪ್ಟ್ (The Inline Script)

React ಪ್ರಾರಂಭವಾಗುವ ಮೊದಲೇ ನೀವು ಥೀಮ್ ಅನ್ನು ಅನ್ವಯಿಸಬೇಕು. ನಿಮ್ಮ <head> ಟ್ಯಾಗ್‌ನಲ್ಲಿ ಒಂದು ಸಣ್ಣ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಇರಿಸಿ. ಈ ಸ್ಕ್ರಿಪ್ಟ್ ಬಳಕೆದಾರರ ಆದ್ಯತೆಯನ್ನು (preference) ಓದುತ್ತದೆ ಮತ್ತು ತಕ್ಷಣವೇ dark ಕ್ಲಾಸ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ.

ಈ ಹಂತಗಳನ್ನು ಬಳಸಿ:

  • localStorage ಅನ್ನು ಪರಿಶೀಲಿಸಲು ನಿಮ್ಮ RootLayout <head> ನಲ್ಲಿ ಒಂದು ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಸೇರಿಸಿ.
  • ನಿಮ್ಮ <html> ಟ್ಯಾಗ್‌ನಲ್ಲಿ suppressHydrationWarning ಬಳಸಿ. ಇದು ಥೀಮ್ ವ್ಯತ್ಯಾಸದ ಬಗ್ಗೆ React ದೂರುವುದನ್ನು ತಡೆಯುತ್ತದೆ.
  • ಸ್ಟೇಟ್ (state) ಅನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು localStorage ನೊಂದಿಗೆ ಸಿಂಕ್ ಮಾಡಲು ThemeProvider ಬಳಸಿ.
  • ಸುಗಮ ಬಣ್ಣಗಳ ಬದಲಾವಣೆಗಾಗಿ (color transitions) Tailwind ನೊಂದಿಗೆ CSS variables ಬಳಸಿ.

ಇದು ಏಕೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ: ಸ್ಕ್ರಿಪ್ಟ್ ಪುಟವು ರೆಂಡರ್ (render) ಆಗುವ ಮೊದಲೇ ರನ್ ಆಗುತ್ತದೆ. ಇದು ದೃಶ್ಯದ ಅನಿರೀಕ್ಷಿತ ಬದಲಾವಣೆಯನ್ನು (visual jump) ತಡೆಯುತ್ತದೆ.

ಚಿತ್ರಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು (Handling Images)

ಲೈಟ್ ಮತ್ತು ಡಾರ್ಕ್ ಮೋಡ್‌ಗಳಿಗಾಗಿ ಚಿತ್ರಗಳು ಹೆಚ್ಚಾಗಿ ವಿಭಿನ್ನ ಆವೃತ್ತಿಗಳನ್ನು ಹೊಂದಿರುತ್ತವೆ. ನಿಮ್ಮ ಮುಂದೆ ಎರಡು ಆಯ್ಕೆಗಳಿವೆ:

  • CSS ವಿಧಾನ: .dark ಕ್ಲಾಸ್ ಆಧಾರದ ಮೇಲೆ ಚಿತ್ರಗಳನ್ನು ಬದಲಾಯಿಸಲು display: none ಮತ್ತು display: block ಬಳಸಿ. ಇದು ಅತ್ಯಂತ ವೇಗವಾದ ಮಾರ್ಗವಾಗಿದೆ.
  • ಕ್ಲೈಂಟ್ ವಿಧಾನ: ಥೀಮ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ ಸರಿಯಾದ ಇಮೇಜ್ ಸೋರ್ಸ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡುವ ಕಾಂಪೊನೆಂಟ್ ಬಳಸಿ.

ಸರ್ವರ್-ಸೈಡ್ ಕಂಟೆಂಟ್‌ಗಾಗಿ ಪ್ರೊ ಟಿಪ್ (Pro Tip)

ಚಾರ್ಟ್‌ಗಳು ಅಥವಾ ಭಾರೀ ಕಂಟೆಂಟ್ (heavy content) ಗಾಗಿ ಸರ್ವರ್‌ಗೆ ಥೀಮ್ ತಿಳಿಯಬೇಕಿದ್ದರೆ, localStorage ಬದಲಿಗೆ ಕುಕೀಸ್ (cookies) ಬಳಸಿ.

  • ಥೀಮ್ ಅನ್ನು ಕುಕೀನಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ.
  • ಆ ಕುಕಿಯನ್ನು ಓದಲು Next.js middleware ಬಳಸಿ.
  • ಹೆಡರ್ಸ್ (headers) ಮೂಲಕ ನಿಮ್ಮ ಲೇಔಟ್‌ಗೆ ಥೀಮ್ ಅನ್ನು ವರ್ಗಾಯಿಸಿ.

ಇದು ಸರ್ವರ್ ಆರಂಭದಿಂದಲೇ ಸರಿಯಾದ HTML ಅನ್ನು ಕಳುಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಫ್ಲ್ಯಾಶ್ ಇಲ್ಲದ ಸಿಸ್ಟಮ್‌ಗಾಗಿ ಸಾರಾಂಶ: • <head> ನಲ್ಲಿ ಇನ್‌ಲೈನ್ ಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ • suppressHydrationWarning ಬಳಸಿ • Context Provider ಮೂಲಕ ಸ್ಟೇಟ್ ನಿರ್ವಹಿಸಿ • ಸಿಸ್ಟಮ್ ಆದ್ಯತೆಗಳ ಬದಲಾವಣೆಗಳನ್ನು ಗಮನಿಸಿ (Listen)

ಈ ವಿಧಾನವು ಪ್ರೊಡಕ್ಷನ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ (production apps) ಸೂಕ್ತವಾಗಿದೆ. ಇದು ತಕ್ಷಣವೇ ಬದಲಾವಣೆ ಮತ್ತು ಶೂನ್ಯ ಫ್ಲ್ಯಾಶ್ ಅನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

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