DesignThemeModes have 3 but need 4?

[pmeems]

I'm working on implementing dark and light mode again in my applications that are using Microsoft.FluentUI.AspNetCore.Components v4.10.4

I'm implementing a button that users can use the switch between light and dark mode:

public sealed partial class ThemeSwitcher : ComponentBase
{
    private DesignThemeModes Mode { get; set; }

    private string ClassValue { get; set; } = "";

    private void ChangeTheme()
    {
        // Switch theme
        if (Mode is DesignThemeModes.System or DesignThemeModes.Light)
        {
            Mode = DesignThemeModes.Dark;
            ClassValue = "darkTheme";
        }
        else
        {
            Mode = DesignThemeModes.Light;
            ClassValue = "lightTheme";
        }
    }
}

I noticed DesignThemeModes has only 3 options, with 1 option for System. But actually, there are two options for System:

• SystemLight
• SystemDark

On my laptop my System value is set to Dark. Which results in the if-statement to set the Mode to DesignThemeModes.Dark and thus nothing is changed. The user needs to click twice, after the first click the mode is set to Dark and the mode is now set to Light.

How do you make this ThemeSwitcher act like it is supposed to work?

[vnbaaij]

Where do SystemLight and SystemaDark come from?

If you look at settings in Edge or Firefox there are also only 3 settings.

If you look how we implemented the setting of the theme in the demo (using the loading theme web component), the site will show in dark mode when system is set to dark mode.

[dvoituron]

The 3 options are mapped to the Browser possibilities: The System will use the Dark/Light mode depending on the browser's system mode.

You can find an example in our documentation: https://www.fluentui-blazor.net/DesignTheme

Or a very small example used during our presentation.
https://github.com/dvoituron/dotnetconf-2024-fluentui-blazor (Step 8)

[pmeems]

Thanks for your quick replies.
Here I can see 4 modes as well:

And I notice that when I go to my application the first time (no local storage value is set) the mode is System. But in my code I don't know if the user has set its system to Dark or Light mode.
Thus I don't know where to switch to. I now in my code assume System means Light mode so I change the mode to Dark.
But when the user has set his System mode in the browser to Dark, like I do, then the mode is switch to Dark but that is the same as it was so visually nothing changes. The user needs to click again to switch to 'Light' mode.
Any other page works fine because now the theme mode is set in the local settings.

[pmeems]

I think I found a solution.

The FluentDesignTheme has an OnLoaded event, which I can use.

<FluentDesignTheme StorageName="theme"
                   CustomColor="#CC3300"
                   OnLoaded="OnloadedTheme"
                   @bind-Mode="@Mode"/>

    private void OnloadedTheme(LoadedEventArgs loadedEventArgs)
    {
        if (loadedEventArgs.Mode == DesignThemeModes.System)
        {
            if (loadedEventArgs.IsDark)
            {
                Mode = DesignThemeModes.Dark;
                ClassValue = "toolbarButton darkTheme";
        }
    }

In the OnLoaded event I check if the Mode is DesignThemeModes.System and then I check if the System prefers dark mode.
If so I explicitly set the Mode to DesignThemeModes.Dark.

When the user now clicks on the ThemeSwitch button and it is already in SystemDark it will switch to Light mode without the need for a second click.

@vnbaaij Is this a correct implementation or do I make wrong assumptions?

[dvoituron]

Yes you can do that