Design Theme values not persisting in local storage between page navigations

[whibdev]

🐛 Bug Report

When following the Design Theme documentation, theme values do not persist in local storage when navigating between pages. Instead, they are replaced with null.

💻 Repro or Code Sample

1. Create a Blazor project and configure the Design Theme exactly as described in the documentation.
2. Change the theme values and confirm they are written to local storage.
3. Navigate to another page.
4. Inspect local storage — values have been replaced with null.

🤔 Expected Behavior

Theme values should remain stored in local storage and persist across page navigations.

😯 Current Behavior

Local storage values are overwritten with null whenever navigating between pages.

FluentUiThemePersistIssue.mp4

💁 Possible Solution

The only workaround I’ve found is wrapping routes with:

<Routes @rendermode="InteractiveServer" />

This prevents the null values, but it introduces issues with other links in the application (login, register) and ideally, I don't want to have the whole site in that mode.
Is there a better workaround or a planned fix?

🔦 Context

This issue prevents theme customization from persisting across pages, which disrupts the user experience and breaks the intended design consistency.

🌍 Your Environment

Window 10
VisualStudio 17.14.14
Microsoft.FluentUI.AspNetCore.Components 4.12.1

[vnbaaij]

We need more details to be able to reproduce this. What template are you using to create the project? What options are you using then (rendermode, interactivity, etc). Please be precise so we can investigate properly.

[whibdev]

🐛 Bug Reproduction Steps

Follow the steps below to reproduce the issue.
(Note: the FluentUI template version used is 4.12.1.)

---

1. Create a new project

Run the following commands:

dotnet new fluentblazor -n DemoThemePersist --auth Individual --use-program-main true
dotnet new sln -n DemoSln
dotnet sln add DemoThemePersist

---

2. Add a Settings.razor page

Open the solution in Visual Studio and create a new Razor component named Settings.razor in the Components/Pages directory.

Replace the contents of Settings.razor with the following:

@page "/settings"

@using Microsoft.FluentUI.AspNetCore.Components.Extensions
@rendermode InteractiveServer

<h1>Settings</h1>

<h2>Theme</h2>
<FluentDesignTheme @bind-Mode="@Mode"
                   @bind-OfficeColor="@TheColor"
                   StorageName="theme" />

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

<FluentSelect Label="Color"
              Items="@(Enum.GetValues<OfficeColor>().Select(i => (OfficeColor?)i))"
              Height="200px"
              Width="250px"
              @bind-SelectedOption="@TheColor">
    <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>

@code {
    private DesignThemeModes Mode { get; set; }
    private OfficeColor? TheColor { get; set; }
}

---

3. Update the layout

Open MainLayout.razor and update it as follows:

@inherits LayoutComponentBase

<FluentDesignTheme StorageName="theme" />

<FluentLayout>
    <FluentHeader>
        <NavLink href="">Test App</NavLink>
        <FluentNavLink Href="settings"
                       Icon="@(new Icons.Regular.Size20.LauncherSettings())"
                       IconColor="Color.Custom" />
    </FluentHeader>

    <FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
        <NavMenu />
        <FluentBodyContent Class="body-content">
            <div class="content">
                @Body
            </div>
        </FluentBodyContent>
    </FluentStack>

    <FluentFooter>
        <a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
        <FluentSpacer />
        <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
    </FluentFooter>
</FluentLayout>

<div id="blazor-error-ui" data-nosnippet>
    An unhandled error has occurred.
    <a href="." class="reload">Reload</a>
    <span class="dismiss">🗙</span>
</div>

@code {
    [Inject] private NavigationManager Navigation { get; set; } = null!;

    private Task ShowSettingsAsync()
    {
        Navigation.NavigateTo("settings");
        return Task.CompletedTask;
    }
}

---

4. Run the application

1. Start the app.

2. Navigate to /settings.

3. Change the Theme and Color values.

4. Open your browser’s Developer Tools → Local Storage and observe:

   • Values update as you change theme and color.
   • Values persist (or not) when navigating to other pages.

[vnbaaij]

Ok, that makes things a lot clearer.

With the settings you specify to create the project, it uses the Blazor default of global SSR. Try to add @rendermode InteractiveServer to a page and see what happens with the local storage

[whibdev]

Yes, as mentioned, the values and theming persist if I add:

<Routes @rendermode="InteractiveServer" />

Is InteractiveServer render mode required on every page for this functionality to work?

[vnbaaij]

I'm not saying you should do it on the Route because that will indeed give issues with the auth pages.
We will need to take a look at the FluentDesignTheme to see how it behaves with SSR. As for me, that won't be before end of next week. Maybe one of the other collaborators has time before that.