Template setting doesn't work

[teekey-dev]

Template setting doesn't work

Rust version: 1.78.0 (stable)

Replication process:

1. clone leptonic-template-ssr project
2. Change default_theme to LeptonicTheme::Dark
3. run cargo leptos watch
4. When the page loaded, the theme was set dark but changes into light instantly

my app.rs code is the following. nothing changed except theme.

use leptonic::prelude::*;
use leptos::*;
use leptos_meta::{provide_meta_context, Meta, Stylesheet, Title};
use leptos_router::*;

use crate::error_template::{AppError, ErrorTemplate};
use crate::pages::welcome::Welcome;

#[component]
pub fn App() -> impl IntoView {
    provide_meta_context();

    view! {
        <Meta name="charset" content="UTF-8"/>
        <Meta name="description" content="Leptonic SSR template"/>
        <Meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <Meta name="theme-color" content="#8856e6"/>

        <Stylesheet id="leptos" href="/pkg/leptonic-template-ssr.css"/>
        <Stylesheet href="https://fonts.googleapis.com/css?family=Roboto&display=swap"/>

        <Title text="Leptonic SSR template"/>

        <Root default_theme=LeptonicTheme::Dark>
            <Router fallback=|| {
                let mut outside_errors = Errors::default();
                outside_errors.insert_with_default_key(AppError::NotFound);
                view! {
                    <ErrorTemplate outside_errors/>
                }
            }>
                <Routes>
                    <Route path="" view=|| view! { <Welcome/> }/>
                </Routes>
            </Router>
        </Root>
    }
}

screen-recording-2024-06-13-at-125925-pm_cEYbE4vu.mp4

[teekey-dev]

I have reviewed Leptonic's code and now understand what is happening. The Root component sets the theme in ThemeProvider not directly from the default value but from the theme value stored in the browser's local storage.

Initially, I compiled and ran the project before changing the theme to Dark. When I launched the browser, it stored the theme value as Light in its local storage. After changing the theme to Dark and refreshing the browser, the project, which has SSR (Server-Side Rendering) features enabled, rendered the HTML with the default theme value I provided (Dark) on the server side. However, once the WASM (WebAssembly) loaded on the client side, the theme value from the local storage became accessible, changing the theme to Light.

[teekey-dev]

I don't think it will cause any bugs in production environments (no one would change the Root component's default theme). However, I still find the behavior somewhat unnatural. In my opinion, the theme value given to the Root component should remain unchanged until explicitly toggled. I suggest storing the toggle's value in local storage rather than the theme itself. This would alleviate the confusing behavior.