Theme values stored in local storage cleared on navigation #3019

nhwilly · 2024-12-05T17:10:31Z

nhwilly
Dec 5, 2024

Not really sure what I'm doing wrong.

I attempted to replicate the theme selection code that's in the documentation. That all works.

When I change values I can see they are written to local storage as expected. But if I navigate to another page (like home/counter/etc.), those values are lost and local storage still has a 'theme' entry but the values are null. They are being overwritten. As expected, if I close the browser while still on my theme selection page, and then restart the app, the values are there and set just fine. They are just overwritten on local navigation. I'm missing something obvious, but I can't figure out what.

I did notice that if, in App.razor I change this:
<FluentDesignTheme StorageName="theme" />
to this:
<FluentDesignTheme />
it stops overwriting, but none of the other pages are updated with the theme properties.

What am I missing? Thanks in advance.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="BlazorAuthFluent.styles.css" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <!--
    This line is supposed to retrieve the last stored theme from local storage and set the values before anything
    happens to prevent the 'flash' during the delay when the app is first visited.
    -->
    <script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.js" type="text/javascript"></script>
    <loading-theme storage-name="theme"></loading-theme>
    <!-- This line retrieves the last saved theme from local storage, key of 'theme' and then provides it to the entire app -->
    <FluentDesignTheme StorageName="theme" />
</body>

</html>

And here's the Razor code, which is almost an exact copy of the sample:

<FluentDesignTheme @bind-Mode="@Mode"
                   @bind-OfficeColor="@OfficeColor"
                   OnLoaded="@OnLoaded"
                   OnLuminanceChanged="@OnLuminanceChanged"
                   StorageName="theme" />

 
 <FluentGrid>
    <FluentGridItem>
        <FluentSelect Label="Theme"
                      Width="250px"
                      Items="@(Enum.GetValues<DesignThemeModes>())"
                      @bind-SelectedOption="@Mode" />
    </FluentGridItem>

    <FluentGridItem>
        <FluentSelect Label="Color"
                      Items="@(Enum.GetValues<OfficeColor>().Select(i => (OfficeColor?)i))"
                      Height="200px"
                      Width="250px"
                      @bind-SelectedOption="@OfficeColor">
            <OptionTemplate>
                <FluentStack>
                    <FluentIcon Value="@(new Icons.Filled.Size20.RectangleLandscape())"
                                Color="Color.Custom"
                                CustomColor="@(@context.ToAttributeValue() != "default" ? context.ToAttributeValue() : "#036ac4" )" />
                    <FluentLabel>@context</FluentLabel>
                </FluentStack>
            </OptionTemplate>
        </FluentSelect>
        <FluentButton Appearance="Appearance.Accent" OnClick="PickRandomColor">Feeling lucky?</FluentButton>
    </FluentGridItem>
</FluentGrid>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Theme values stored in local storage cleared on navigation #3019

{{title}}

Replies: 0 comments

Select a reply

Theme values stored in local storage cleared on navigation #3019

nhwilly Dec 5, 2024

Replies: 0 comments

nhwilly
Dec 5, 2024