Flickering DarkMode #3095

danilo-leal · 2020-12-15T01:55:33Z

danilo-leal
Dec 15, 2020

Hey guys!

I've been migrating my personal portfolio from Webflow to Next.js with Tailwind.
Since Next.js does that server side rendering, I had to make a workaround to use localStorage in order to set the dark mode.

But it's flickering whenever I change routes. Does anyone knows how to get around this? I've seen some stuff at the Next.js discussion space but I'm wondering if with the Tailwind approach to it there isn't any other way.

Does anyone have any clue about it?
Check the site deployed at Vercel here: https://dl-co.vercel.app

Answered by danilo-leal

Dec 15, 2020

Just figured this out using the incredible https://github.com/pacocoursey/next-themes abstraction. It worked like a charm. Too easy. I highly recommend to anyone using the Tailwind/Next combo.

View full answer

simonswiss · 2020-12-15T02:40:29Z

simonswiss
Dec 15, 2020

Hey!

Yeah, it's kinda tricky! Here's a good thread you might find interesting and will get you on the right path:

vercel/next.js#12533

Would you be okay to share the source code of your project too?

1 reply

danilo-leal Dec 15, 2020
Author

I red just that thread. But since I'm not so much of a pro at coding and the dude there isn't using Tailwind, I figured I might get a more objective help over here. I checked his code but couldn't think of a way to insert it into mine. But yea, of course! You can check out my website repository, it's public! Here's the function toggling the themes: https://github.com/danilo-leal/daniloleal.co/blob/main/components/atoms/DarkModeToggle.js

danilo-leal · 2020-12-15T16:23:46Z

danilo-leal
Dec 15, 2020
Author

Just figured this out using the incredible https://github.com/pacocoursey/next-themes abstraction. It worked like a charm. Too easy. I highly recommend to anyone using the Tailwind/Next combo.

0 replies

wisdomsGit21 · 2023-07-17T17:58:11Z

wisdomsGit21
Jul 17, 2023

i have the same issue but for vite

0 replies

mattslight · 2023-12-13T11:28:06Z

mattslight
Dec 13, 2023

If you are using Flowbite (this search result was showing as top for me) then you can use the solution noted here...

https://www.flowbite-react.com/docs/customize/dark-mode

NextJS#
In server side rendered applications, such as NextJS, to avoid page flicker (if dark mode is set) before NextJS hydrates the content, ThemeModeScript component must be rendered in Head component (see implementation below).

ThemeModeScript renders a script tag that sets dark or removes dark from element before hydration occurs.

// App router[#](https://www.flowbite-react.com/docs/customize/dark-mode#app-router)
// app/layout.tsx

import { ThemeModeScript } from 'flowbite-react';
 
export default function RootLayout({ children }) {
   return (
     <html>
       <head>
         <ThemeModeScript />
       </head>
       <body>{children}</body>
     </html>
   );
 }

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Flickering DarkMode #3095

{{title}}

Replies: 4 comments 1 reply

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Flickering DarkMode #3095

danilo-leal Dec 15, 2020

Replies: 4 comments · 1 reply

simonswiss Dec 15, 2020

danilo-leal Dec 15, 2020 Author

danilo-leal Dec 15, 2020 Author

wisdomsGit21 Jul 17, 2023

mattslight Dec 13, 2023

danilo-leal
Dec 15, 2020

Replies: 4 comments 1 reply

simonswiss
Dec 15, 2020

danilo-leal Dec 15, 2020
Author

danilo-leal
Dec 15, 2020
Author

wisdomsGit21
Jul 17, 2023

mattslight
Dec 13, 2023