Closed iwebexpert closed 4 months ago
I think I know where the problem is, now I have a couple of questions for u:
<Flowbite />
component with the theme={{ mode: "dark" }}
on?<Flowbite />
at all? if yes, where and how exactlyThing is, u need to align the initial theme mode both with <ThemeModeScript />
and <Flowbite />
components.
I am currently looking into why probably just using <ThemeModeScript />
alone is not working properly.
Back with some updates:
Currently <ThemeModeScript />
computes the final mode
prop in the following order:
localStorage
=> mode
(prop) => defaultMode
("light"), then if value is auto
it will infer the value from window.matchMedia(prefers-color-scheme)
otherwise the computation before.
I think I know where the problem is, now I have a couple of questions for u:
1. are u using `<Flowbite />` component with the `theme={{ mode: "dark" }}` on? 2. are u using `<Flowbite />` at all? if yes, where and how exactly
Thing is, u need to align the initial theme mode both with
<ThemeModeScript />
and<Flowbite />
components.I am currently looking into why probably just using
<ThemeModeScript />
alone is not working properly.
You're absolutely right!
I actually used a custom theme without the mode
parameter.
I'm currently using the following code for the theme:
const customTheme: CustomFlowbiteTheme = {...}
<Flowbite theme={{ theme: customTheme, mode: 'dark' }}>...</Flowbite>
And my main layout:
<head>
<ThemeModeScript mode="dark" />
</head>
Everything works as expected. Thanks for solving the issue!
Steps to reproduce
I need a dark theme by default. In the previous version I added the dark class to the html tag. It worked. Now (v0.7.0)
<ThemeModeScript mode="dark" />
removes my dark class from the html tag because of this, the light theme always goes first if the user has not changed it via<DarkThemeToggle />
My code:
tailwind.config.ts
Current behavior
I clear localStorage and after refreshing the page, “flowbite-theme-mode: light” is always added. If I change the theme to dark, everything works. I need the main theme to be in dark mode the first time a user visits a site.
Expected behavior
If the user visits the site for the first time, a dark theme should be displayed.
Context
package.json: