Theme flashing issue.

[glennpierce]

Hi

I am having a little issue with an ssr app and the dark / light mode.

Probably me doing something stupid.

I am not sure how to prevent the theme from defaulting to light when the ssr app sends the first hydrated page.

From what I read the Leptos author suggests setting

https://www.youtube.com/watch?v=AD3FHodVgE8&t=2040s https://github.com/leptos-rs/example-darkmode/blob/main/src/dark_mode.rs

I have setup my project to send / get a cookie and on new refresh and I can instantly get the theme set correctly but even though I set theme.set() with the cookie value at that time I have to wait until the page is dehydrated until I see the them change.

Thaw is enabled with ssr

Thanks

[luoxiaozero]

You can introduce the following CSS files to temporarily solve this problem.

body {
    background-color: rgb(26, 29, 30);
    color: rgb(236, 237, 238);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 14px;
    color-scheme: dark;
    margin: 0px;
}

I will fix this completely in version 0.4.

[glennpierce]

Thanks. Its probably the same reason icons and the grid are different between ssr/csr If it helps when you implement it I can try to do a demo or grab the css before and after if I can.

[luoxiaozero]

I have implemented this feature in the v0.4-beta version.