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

Dark mode tampak sederhana. Lalu Anda melihat kilatan (flash) tersebut.

Saat pengguna memuat halaman Anda, server mengirimkan tema default. Pengguna akan melihat layar putih selama sepersekian detik sebelum tema gelap diterapkan. Ini adalah pengalaman pengguna yang buruk.

Masalah ini terjadi karena server tidak dapat membaca localStorage. Server baru mengetahui tema setelah browser menjalankan JavaScript Anda.

Berikut cara memperbaikinya.

Solusinya: Inline Script

Anda harus menerapkan tema sebelum React dimulai. Letakkan skrip kecil di dalam tag Anda. Skrip ini akan membaca preferensi dan langsung menambahkan class dark.

Gunakan langkah-langkah ini:

  • Tambahkan skrip di RootLayout Anda untuk memeriksa localStorage.
  • Gunakan suppressHydrationWarning pada tag Anda. Ini mencegah React memberikan peringatan tentang ketidakcocokan tema.
  • Gunakan ThemeProvider untuk mengelola state dan sinkronisasi dengan localStorage.
  • Gunakan variabel CSS dengan Tailwind untuk transisi warna yang mulus.

Mengapa ini berhasil: Skrip berjalan sebelum halaman dirender. Ini mencegah lonjakan visual (visual jump).

Menangani Gambar

Gambar sering kali membutuhkan versi yang berbeda untuk mode terang dan gelap. Anda memiliki dua pilihan:

  • Metode CSS: Gunakan display none dan display block untuk menukar gambar berdasarkan class .dark. Ini adalah cara tercepat.
  • Metode Client: Gunakan komponen yang memeriksa tema dan memilih sumber gambar yang tepat.

Tips Pro untuk Konten Sisi Server (Server-Side)

Jika Anda ingin server mengetahui tema untuk grafik atau konten berat, gunakan cookie sebagai pengganti localStorage.

  • Simpan tema dalam cookie.
  • Gunakan middleware Next.js untuk membaca cookie tersebut.
  • Teruskan tema ke layout Anda melalui headers.

Hal ini memungkinkan server untuk mengirimkan HTML yang benar sejak awal.

Ringkasan untuk sistem tanpa flash: • Gunakan inline script di dalam • Gunakan suppressHydrationWarning • Kelola state dengan Context Provider • Pantau perubahan preferensi sistem

Pendekatan ini bekerja untuk aplikasi produksi. Ini memastikan peralihan instan dan tanpa kilatan (zero flashes).

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