fix: FluentMessageBarProvider does not respect theme when using both WebAssembly and Server Interactivity

[fjeller]

Context

For this application I need some pages to run on the server (Interactive Server) and some pages to run on the client (InteractiveWebAssembly). The pages running on the server should always be in dark mode, the pages running in WebAssembly mode will have a switch. But that is not important.

I used the FluentDesignTheme-component to add the dark theme, which works. However, as soon as I want to display a message, that message seems to use the background colors of the light theme, which is obviously wrong. This happens on the server side (InteractiveServer), I did not evaluate if the problem also exists with InteractiveWebAssembly.

To reproduce the issue I created an application using the FluentUi-Blazor-Template. First I created a Webapplication using Server-Side-Rendering only, with the rendermode set to global for all pages. I put the theme on Homepage (set to dark), also the FluentMessageProvider and the MessageService and tried displaying a message. This works without problem, clearly the messages are shown in dark mode. Perfect.

Then I created an application in WebAssembly-Mode, with Interactivity set to "per page", and since I also want the server interactivity, I added the interactive Server components in program.cs and created a sample page, this time setting the interactivity "per page" and not global. Here is the source code of that page:

@page "/sample"

@inject IMessageService MessageService

@rendermode InteractiveServer

<FluentMessageBarProvider />

This is a test

<FluentButton OnClick="ShowMessage" Appearance="Appearance.Accent">Test</FluentButton>

@code {
	private void ShowMessage()
	{
		MessageService.ShowMessageBar( options =>
		{
			options.AllowDismiss = true;
			options.ClearAfterNavigation = true;
			options.Intent = MessageIntent.Success;
			options.Title = "This is a success message";
		} );
	}
}

However, the message shown does obviously NOT respect the dark mode set using FluentDesignTheme (it is set in the MainLayout.razor, not shown here).

A check of the HTML shows the following:

<div class="fluent-messagebar intent-success" animation="fadein" b-ig2qs97tvl>
  ...
</div>

The class here should be (as I understand it): fluent-messagebar dark intent-success. Unfortunately, whatever I try to do, I could not get it to work. If the modes are not mixed, everything seems to work.

Expected Behaviour

The messages should be shown with the dark mode theme, even if the interactivity is mixed. This might also happen with other components, I did not check that.

Sample Code

You can find 2 applications in my github. "NotificationTest" is the server-only-version which works, "NotificationTest2" is the non-working version with the mixed interactivities. Here's the link:
https://github.com/fjeller/FluentBugSample

Both applications are ready to run.

Environment

• Windows 11 Enterprise,
• AMD Ryzen 9, 64GB RAM.
• Browser: Chrome.
• Visual Studio 2026 Professional.
• .NET10
• Blazor FluentUi 4.13.2

[vnbaaij]

Before I have a chance to look at your example, it might help if you check out the code of our demo site. As you can see on the message bar page, it is working there with both light and dark themes.
It is running on Wasm and is available as part of the repo (in the examples folder)

Also, because of the mixed interactivity and the fact you mentioned the server always needs to have dark mode, maybe you need to use different storage names for the different environments?