fix: Screen flashes when in dark mode and site is first opened.

[mrpmorris]

1: Set dark mode on your computer
2: Open the demo site
3: Site opens in light mode
4: Site flicks to dark mode
5: Seek a specialist in eye burns

[vnbaaij]

I can do window.matchMedia("(prefers-color-scheme: dark)").matches ; in JavaScript not sooner then in OnAfterRender and then it is already too late...
Any other suggestions on how to prevent this flash?

[mrpmorris]

Shouldn't the FAST css handle it before Blazor even starts up?

[BieleckiLtd]

[...] Any other suggestions on how to prevent this flash?

Dark by default and later switch to light if required?

[andreisaperski]

There're two parts:

• when Fluent UI WC lib is loaded, it creates 'base-layer-luminance' token with default value StandardLuminance.LightMode (0.98), respective variable is assigned to 'html' node.
• in case of Server hosting model, there's a period of time when page is displayed, but site.css is not applied yet - page is effectively in Light mode during this time.

Fluent UI WC doesn't provide a mechanism to override default value for 'base-layer-luminance'. Something like window['DefaultBaseLayerLuminance'] || StandardLuminance.LightMode instead of StandardLuminance.LightMode, probably, wouldn't hurt. Such fix could be applied to web-components-v2.XXX.min.js, but it's not very practical - it needs to be re-applied to new versions.
The second part could be mitigated with some bootstrap styles placed in host file (_Layout.cshtml) e.g.

...
    <base href="~/" />
    <style>
        :root {
            --neutral-base-color: #212121;
            --neutral-fill-layer-rest: #ffffff;
        }
        @@media(prefers-color-scheme: dark) {
            :root {
                --neutral-base-color: #ffffff;
                --neutral-fill-layer-rest: #464646;
            }
        }

        body,
        #container {
            color: var(--neutral-base-color);
            background-color: var(--neutral-fill-layer-rest);
        }
    </style>
    <link href="_content/FluentUI.Demo.Shared/css/site.css" rel="stylesheet" />
...

Made sort of PoC with altered web-components-v2.5.16.min.js and bootstrap style

ServerMode.mp4

[vnbaaij]

@andreisaperski love this! Will see how we can integrate this.

[vnbaaij]

We have a solution implemented for it in the demo site. Please use the source as a reference on solving this. See also #706 (comment)