Still flashing in Nextjs 13, Tailwind, DaisyUI

[sivert-io]

Hey, my site is flashing when refreshing.

I know this is a duplicate issue but I will still post the issue as its an important issue to fix.
The readme states the flashing is fixed, but in my case (and in many issues posted) it is not.

My website is: not relevant
My repo is: not relevant

I am using DaisyUI to add styling.

I am implementing ThemeProvider in _app.tsx like so:

<ThemeProvider value={{ light: 'cmyk', dark: 'dracula' }}>
  ...
  <Component {...pageProps} key={router.route} />
</ThemeProvider>

Body and HTML are not styled manually, they receive their styling from Tailwind css.

What am I doing wrong?

I appreciate any help 😄

[sivert-io]

I've performed some more tests, it seems the issue only persists when a theme has been set in the localStorage. If you delete the localStorage entry, the site doesn't flash anymore.

[ImraKocis]

@SivertGullbergHansen i have same issue, can u show me where did you execute deletion of localeStorage? Thank you in advance

[sivert-io]

@SivertGullbergHansen i have same issue, can u show me where did you execute deletion of localeStorage? Thank you in advance

Sorry if it was not clear, I meant when I enter developer tools in my browser and manually delete the theme entry in LocalStorage, it prevents the site from flashing. So I'm not doing anything with the code 😕 Its not a solution, just an observation 😊

[sellimenes]

I don't know it's solved or no, but I have the same issue. I am just trying to implement a dark mode to a starter project. But it flashes on refresh. I am Next.js 13.4.9

[Jean-Juel]

same situation for me

[stepbrobd]

Still flashing on next 13.4.12 (appdir) with next-themes 0.2.1 + tailwindcss 3.3.3

[stepbrobd]

For those who are still having the flashing problem, check out #156, disabling Cloudflare Rocket Loader solved the problem for me.

[technophile-04]

In our case (Next + DaisyUI custom theme) the same problem was occurring a workaround that fixed this was using "light" nd "dark" as custom daisUI themes names instead of using custom names:

Before :

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  darkTheme: "scaffoldETHDark",
  // DaisyUI theme colors
  daisyui: {
    themes: [{ scaffoldETH: {...} }, { scaffoldETHDark: {...} }],
  },
};

After :

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  darkTheme: "dark",
  // DaisyUI theme colors
  daisyui: {
    themes: [{ light: {...} }, { dark: {...} }],
  },
};

And after this removing the custom value prop passed to <ThemeProvider>

So my wild guess is this problem occurs if you pass value prop to <ThemeProvider>

[jwu-ice]

@technophile-04 Thx i solved this problem.

I avoided direct matching with ThemeProvider like value={{ light: 'cmyk', dark: 'dracula' }}

and separate hook like useDarkMode and matched the theme from there.