GlobalState is set to default on wasm startup about fluentui-blazor

[vnbaaij]

Luminanceneeds to have a default value. We set it to LightMode. We can only change it once JavaScript is available so in OnAfterRenderAsync

You can use the loading-theme webcomponent to read/work with it earlier. See https://www.fluentui-blazor.net/DesignTheme for more information

[StephenOTT]

@vnbaaij it would seem like GlobalState should have a method that provides similar functionality to:

fluentui-blazor/src/Core/Components/DesignSystemProvider/FluentDesignTheme.razor.cs

Lines 196 to 204 in eea55ea

	var realLuminance = await Module.InvokeAsync<string>("GetGlobalLuminance");
	realLuminance = string.IsNullOrWhiteSpace(realLuminance) ? "1.0" : realLuminance;
	var isDark = double.Parse(realLuminance, CultureInfo.InvariantCulture) < 0.5;
	GlobalDesign.SetLuminance(isDark ? StandardLuminance.DarkMode : StandardLuminance.LightMode);
	if (OnLoaded.HasDelegate)
	{
	await OnLoaded.InvokeAsync(new LoadedEventArgs(Mode, isDark, CustomColor, OfficeColor, StorageName, Direction.ToAttributeValue()));
	}

so we can get the state earlier.

This seems to be a gap: several issues state not to put the FluentDesignTheme into the main layout, but in order for the GlobalState to have an actual valid value we need FluentDesignTheme to be active. But FluentDesignTheme is only used (currently) to edit the theme configs.

If a user never navigates to a page with FluentDesignTheme, how would the page ever detect programmatically that the theme is in Light vs dark mode?

[vnbaaij]

We can't get the mode earlier. As you can see in line 196, we need JS to get the luminance.

As said in my previous comment, you can use the loading-theme web component. See https://www.fluentui-blazor.net/DesignTheme#how-to-remove-the-%22bright-flash%22-on-loading

[StephenOTT]

How does having the loading theme in the index.html provide general component access to which luminance/isDark status?

[vnbaaij]

It doesn't. But together with the <fluent-design-theme> web component it can read from local storage and manipulate the Design Tokens before Blazor starts.

[StephenOTT]

If I understand correctly; the suggested solution then would be to place the fluent-design-theme component on the page and read from that component? Can fluentdesigntheme be placed on multiple pages without issue?

[dvoituron]

@StephenOTT

If a user never navigates to a page with FluentDesignTheme, how would the page ever detect programmatically that the theme is in Light vs dark mode?

You can also capture OnLoaded or OnLuminanceChanged events to be informed of theme changes.

<FluentDesignTheme Mode="@DesignThemeModes.System" 
                   OnLoaded="@(e => Console.WriteLine(e.Mode))" 
                   OnLuminanceChanged="@(e => Console.WriteLine(e.Mode))" />

[StephenOTT]

@dvoituron would this be done on any page where we need this info? Or you expect it to be configured at a mainlayout/app level and the info stored in a global singleton.

[dvoituron]

You could use that on the MainLayout page and save the variable as you want (local or global)

[StephenOTT]

@dvoituron if we put FluentDesignTheme into the mainLayout, then should that populate GlobalState with the proper value on startup and downstream components would be able to get the mode/isDark from GlobalState?

Creating another AppState to store the mode/isDark seems like duplication of the State management implemented globalState

[StephenOTT]

@dvoituron consider that the isDark status may be wanted as early as possible (such as in the App.razor level) / during actions like authorization fragments.

A simple example i came up with is using the Overlay Component: This component could be used during the very first moments of the app after WebAssembly loading and therefore before "isDark" is available in GlobalState. But the backgroundColour for the Overlay component may want to be changed based on Light vs Dark modes.

[dvoituron]

You'll find the explanation on this page:

1. You have the Blazor component FluentDesignTheme to manage the theme in Blazor
2. But you also have the web component fluent-design-theme that can be used before Blazor loads all the assemblies.

FluentDesignTheme

FluentDesignTheme is a Blazor component. It comes with an additional web component (fluent-design-theme) that can be used in HTML before Blazor has started and components are rendered. This avoids a "flash" of dark or white at page startup. Particularly so when using a WebAssembly project, which in general requires more time to download the assemblies needed to run the application.

Example in HTML

<fluent-design-theme mode="dark" primary-color="word" />
<fluent-design-theme mode="light" primary-color="#ff0000" />

Example in Blazor

<FluentDesignTheme Mode="DesignThemeModes.Dark" OfficeColor="OfficeColor.Word" />
<FluentDesignTheme Mode="DesignThemeModes.Light" CustomColor="#ff0000" />

[StephenOTT]

@dvoituron yes 100% understood about pre-webassembly loading and use of the web component and/or loading-theme component.

In the scenario I am looking at is: determining essentially "isDark" for use in the rendering configuration of blazor components (custom components, other libraries, etc) that do not use the design token system.

The gap here seems to be that we cannot access the actual "isDark" as part of GlobalState during rendering as it is only set after the fact?
From a usage perspective this seems like gap for a very commonly used property to be used with supporting libraries.

Once blazor has loaded, the various components (custom and otherwise) generally have a use case to want to know "We are in light or dark mode".

For example how would you recommend to set the background color of fluent overlay which is used in the App.razor's component.

This feels like something is missing here as the "isDark" attribute is a VERY common need during rendering decisions (of blazor components)

[dvoituron]

Is it not possible for you to use OnLuminanceChanged to get the applied Mode? What is the problem about that?
Of course, this value will be received after the Blazor loading, but before that you don't have a simple way to have this info (except using JavaScript).

<FluentDesignTheme Mode="@DesignThemeModes.System" 
                   OnLoaded="@(e => Console.WriteLine(e.Mode))" 
                   OnLuminanceChanged="@(e => Console.WriteLine(e.Mode))" />

[StephenOTT]

@dvoituron Mode is System, Light and Dark. Where System could mean Light or Dark. One must use isDark to figure out the final condition.

When rendering how would you determine the difference between the default Luminance and the actual luminance?

GlobalState is already a state container holding this info. But it would seem we then need to duplicate the usage of GlobalState to re-store the same information and then start tracking changes and loads.

If you had a overlay such as:

<FluentOverlay Visible="true" Opacity="0.5" Dismissable="false" FullScreen="true" BackgroundColor="@(()=> isDark == true ? "#someDarkColor" : "#someLightColor")">

The isDark custom method would not have to also implement on the page the FluentDesignTheme, a additional handler to luminanceChanged, a storage for updating this value and likely a if statement around the overlay to not load the value until the isDark value has been set / equals not null.

If this is correct, is this not excessive work for a extremely common need to know globally at any time "Is the app in light or dark mode?"

[StephenOTT]

@vnbaaij @dvoituron

Okay after some trial and error, this is what was found to ~work

1. Add FluentDesignTheme into the top of App.razor with a themeLoaded if statement:

@inject GlobalState GlobalState

<FluentDesignTheme StorageName="theme" OnLoaded="() => themeLoaded=true"></FluentDesignTheme>
@if (themeLoaded)
{
   ... regular app.razor code
   <Router AppAssembly="@typeof(App).Assembly">
       <Found Context="routeData">
           <FluentOverlay Visible="true" Opacity="0.5" Dismissable="false" FullScreen="true" BackgroundColor="@calcBackground()">
   ...

}

@code
{
    bool themeLoaded = false;
...

    string calcBackground()
    {
        return GlobalState.Luminance == StandardLuminance.LightMode ? "#AC3232" : "#6ABE30";
    }
}

This seems to do the ~trick (Assuming not missing anything that is broke).
This seems to allow us to access GlobalState with the "real value" at any point

Thoughts?