feat: add better theme initialization to dev-v5

[codymullins]

🙋 Feature Request

I'd like to be able to statically set the theme. If it picks up the attribute ahead of time, prefer that over the browser-prefers scheme. Example PR:

dev-v5...codymullins:fluentui-blazor:patch-1

🤔 Expected Behavior

see above

😯 Current Behavior

currently, you cannot easily set the theme, it is bound to whatever the browser tells you

💁 Possible Solution

see above

[codymullins]

As a workaround, I've added this to my App.razor, after the blazor script:

<script async>
    document.body.addEventListener('themeChanged', function (e) {
        if (e.detail.isDark) {
            document.documentElement.removeAttribute("data-theme");
            Blazor.theme.setLightTheme();
        } 
    });
</script>

[dvoituron]

Good point. At the moment, the “Theme Manager” is not yet complete.
But a similar solution could be a good idea.

[codymullins]

@dvoituron ideally something like what I have in the PR, that doesn't require JS to invoke the switch.

Happy to banter back and forth on it and pitch in a bit for the theme management.

[dvoituron]

I created this PR: #4202