fix: inconsistent behaviour between FluentDesignTheme and loading-theme

[davhdavh]

🐛 Bug Report

FluentDesignTheme will set document.body.dataset.theme in UpdateBodyDataSetTheme, but loading-theme does not.

💻 Repro or Code Sample

 <script src="@Assets["/_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.js"]" type="text/javascript"></script>
 <loading-theme storage-name="theme" mode="system" primary-color="#dc7a04"></loading-theme>
   <FluentDesignTheme StorageName="theme" @bind-Mode="@_mode"></FluentDesignTheme>
    <FluentButton Disabled="@(!RendererInfo.IsInteractive)" Autofocus="false" IconStart="@(new Regular.Size24.Lightbulb().WithColor(Color.Neutral))" aria-label="dark/light" Appearance="Appearance.Outline" OnClick="@OnTheme"></FluentButton>

   private          DesignThemeModes    _mode = DesignThemeModes.System;

   private void OnTheme()
   {
      _mode = _mode == DesignThemeModes.Light ? DesignThemeModes.System : DesignThemeModes.Light;
   }

@media (prefers-color-scheme: dark) {
 body:not([data-theme="light"]) {
  background-color: pink;
 }
}

1. Show page with system configured for dark: background: pink
2. click lightbulb: background white
3. refresh page: background pink <-- error

🤔 Expected Behavior

data-theme always set on body.

😯 Current Behavior

FluentDesignTheme sets theme after CHANGE of mode.

🌍 Your Environment

4.11.6

[dvoituron]

Will be fixed in the next Release: #3516

[davhdavh]

This was not fixed totally @dvoituron .
The set mode was fixed in #3516, but the colorSchemeListener does not use the mode setter, it just changes the baseLayerLuminance.

[davhdavh]

Also it is very inconsistent in behaviour.
If mode is not set, then theme is not set.
If mode is set to system, then theme is set, but colorSchemeListener doesnt work.

[vnbaaij]

@davhdavh please don't pile up on a closed issue that was addressed with a PR.

If follow up work is needed, then please create a new issue. Thanks.