Issue with theme not being respected on certain elements

[greg-bishop]

I am building a custom Teams app. Naturally, I'm using the Teams color scheme, and I have the ability for the user to change the mode (System, Light, and Dark).

I have the following in App.razor:

<FluentDesignTheme OfficeColor="OfficeColor.Teams" StorageName="theme" />

And I have the following in a component that allows the user to change the mode:

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

For most elements, the color and mode are being respected properly. However, on FluentSwitches, it is still using Light mode (note the text color below) with a blue color scheme:

The FluentMenu is also using Light mode and a blue color scheme:

As expected, the styles from the #shadow-root :host are overriding the styles from :root, but the issue is that the :host styles are not respecting the theme even though the :root styles are.

I have tried removing the FluentDesignTheme that allows the user to change the mode and hardcoding both Mode and OfficeColor in the FluentDesignTheme in App.razor, but the issue remained.

Has anyone else run into this? Is there something I can change to fix this?

System Info:
Browser: Google Chrome v128.0.6613.85
Microsoft.FluentUI.AspNetCore.Components v4.9.3

[dvoituron]

The switch color is defined by this CSS and an example is on the Demo website:

:host(.checked) .switch {
    background: var(--accent-fill-rest);
}

Can you check that you have this style, and that it's not overloaded?

And that is similar for the FluentMenu in Dark mode.

[greg-bishop]

Thank you for your response. I do have this style, and it is using the variable.

The issue I'm running into is that the :host variables are not respecting the theme settings, even though the :root variables are.

Here's some of the :root variables:

In the demo website, the :host variables change when the theme changes, so even though the :host variables override the :root variables, the theme is consistently applied: