Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Theme briefly flashes light mode #1506

Open
2 tasks done
harrisonratcliffe opened this issue Nov 6, 2024 · 8 comments
Open
2 tasks done

Theme briefly flashes light mode #1506

harrisonratcliffe opened this issue Nov 6, 2024 · 8 comments

Comments

@harrisonratcliffe
Copy link

harrisonratcliffe commented Nov 6, 2024 •
edited
Loading

  • I have searched the Issues to see if this bug has already been reported
  • I have tested the latest version

Steps to reproduce

  1. Refresh the page

Current behavior

The theme briefly shows as light mode if in dark mode and then flicks to the expected mode (dark). This doesn't happen in light mode.

Expected behavior

No flash when in dark mode like it does in light mode

Context

I'm using this in my layout:

<Flowbite>
    <Head title={`${title} - ${app.name}`} />
    {children}
</Flowbite>

I use Laravel/InertiaJS/React

Has anyone else experienced this or know how to resolve it?
@harrisonratcliffe
Copy link
Author

Here is a video.

Screen.Recording.2024-11-06.at.17.47.53.mov

@SutuSebastian
Copy link
Collaborator

To fix this problem u'd have to persist in cache or Laravel session the mode.

I'll do a spike on implementing ThemeModeScript (see
https://flowbite-react.com/docs/guides/remix#dark-mode) that will take this off users shoulder.

@harrisonratcliffe
Copy link
Author

harrisonratcliffe commented Nov 6, 2024 •
edited
Loading

To fix this problem u'd have to persist in cache or Laravel session the mode.

I'll do a spike on implementing ThemeModeScript (see https://flowbite-react.com/docs/guides/remix#dark-mode) that will take this off users shoulder.

Thanks for replying.

So I should just store the choice in cache and then use useThemeMode() to set the theme or am I misunderstanding?

@harrisonratcliffe
Copy link
Author

To fix this problem u'd have to persist in cache or Laravel session the mode.

I'll do a spike on implementing ThemeModeScript (see https://flowbite-react.com/docs/guides/remix#dark-mode) that will take this off users shoulder.

To fix this problem u'd have to persist in cache or Laravel session the mode.
I'll do a spike on implementing ThemeModeScript (see https://flowbite-react.com/docs/guides/remix#dark-mode) that will take this off users shoulder.

Thanks for replying.

So I should just store the choice in cache and then use useThemeMode() to set the theme or am I misunderstanding?

Or do you have a basic example? Happy to sponser you.

@SutuSebastian
Copy link
Collaborator

@harrisonratcliffe are u using Laravite + Vite + SSR mode? (check 1. https://laravel.com/docs/11.x/vite#ssr, 2. https://inertiajs.com/server-side-rendering)

@harrisonratcliffe
Copy link
Author

@harrisonratcliffe are u using Laravite + Vite + SSR mode? (check 1. https://laravel.com/docs/11.x/vite#ssr, 2. https://inertiajs.com/server-side-rendering)

Yep I am using InertiaJS SSR.

@SutuSebastian
Copy link
Collaborator

SutuSebastian commented Nov 7, 2024 •
edited
Loading

After many failures, it seems so hard to inject JSX to HTML on-the-fly before page load with Inertia + SSR, which leaves us with one last option (dirty and will be deprecated in the future due to #1498 ):

open resources/views/app.blade.php page and inject the following script inside the head

<script data-flowbite-theme-mode-script>
    try {
        const mode = window.localStorage.getItem("flowbite-theme-mode") ?? "light";
        const computedMode =
            mode === "auto" ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light") : mode;

        if (computedMode === "dark") {
            document.documentElement.classList.add("dark");
        } else {
            document.documentElement.classList.remove("dark");
        }
    } catch (e) {}
</script>

^ this is exactly what <ThemeModeScript /> renders at the moment

@jonyboom
Copy link

Ok, I've just found this when trying to resolve the white flicker when in dark mode and discovered the component which has resolved the issue for me. Remix SSR. Searching the docs I found it on the Remix page which makes sense, must have missed it when I set the project up. Thanks and leaving this here for anyone else in future.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@SutuSebastian @harrisonratcliffe @jonyboom