Problems trying to set up Themes

[nangusa]

Hi, I came here to ask because I don't know how to make the default theming to work.

I'm trying to add the user the options to change from light theme to dark. I'm following the instructions given in the documentation (https://www.fluentui-blazor.net/DesignTheme) but it doesn't work as I expect, so I'm doing something wrong but I don't know what.

My project is a Blazor Server app with auto rendering from the Fluent template. I added to my App.razor file the following, per documentation:

<FluentDesignTheme StorageName="theme" />
<!-- Set the default theme -->
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.js" type="text/javascript"></script>
<loading-theme storage-name="theme"></loading-theme>

Then, in my MainLayout.razor file I added:

<FluentDesignTheme Mode="DesignThemeModes.Dark" OfficeColor="OfficeColor.Word" />

The problem I have is that when changing pages in the app, the theme resets. For example, using the default project template, if I click on "Counter" to go to the Counter page, the theme restores to system when it was black in the Home page. Also, sometimes child components doesn't render with the right theme, so the page renders parts in dark mode, parts in system or light mode.

Also, sometimes navigating back and forth between pages and/or components solve the problem and the entire application stays at the desired color theme for the rest of the session, which it's weird and I don't understand why this happens.

I tried with a custom component on which I added the example code in the documentation to allow the user to change themes. I added this component to the top of the MainLayout.razor file to be available in all the application's pages. This code works as expected by changing the theme on the fly when the user changes it, but as soon as he navigates to another page, the theme resets again and the strange behaviour I wrote earlier appears.

I'm here because I'm lost right now. I tried theming as per documentation starting from a fresh project template and the behaviour is the same, so I'm needing some advise about what I could be doing wrong, or something new to try to get it working.

Thanks in advance and have a good day.

[vnbaaij]

You can see how we did it in the demo site. The code is in the repository in the examples folder

[nangusa]

I checked it out. It was hard for someone new to Blazor like me and there are things I didn't properly figured it out yet but it was a very good excersice, thanks for the suggestion.

I found my project was missing the script included in the docs for setting up the project:

<script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>

Once added, themes started working as expected, but I found that if I have a component inside a FluentCard, that component don¿t apply the theme until the entire page is refreshed. After that it works normally. To clarify, I have a page with a title and a FluentCard component, inside the FluentCard I put my component, and this component don't apply the theme change on the fly.

I tried adding a Theme service as scoped to raise an event when Theme changed, but it didn't work either by subscribing to the event in my component.

Time to investigate a little more I guess, thank you.

[MarvinKlein1508]

@nangusa FluentDesignTheme needs interactivity in order to work properly. Try defining a rendermode in App.razor or move <FluentDesignTheme StorageName="theme" /> to Routes.razor

[nangusa]

Hi Marvin, yes, I have FluentDesignTheme inside an interactive component.

As I replied before, I found my project was missing a script.

Thank you for the clarification anyway.