[FluentDesignTheme] Add OnLoaded event

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -2150,6 +2150,11 @@
             Callback raised when the Dark/Light luminance changes.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDesignTheme.OnLoaded">
+            <summary>
+            Callback raised when the component is rendered for the first time.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDesignTheme.ChildContent">
             <summary>
             Gets or sets the content of the component.

examples/Demo/Shared/Pages/Design/Examples/DesignThemeDefault.razor

@@ -1,6 +1,7 @@
 <FluentDesignTheme @bind-Mode="@Mode"
                    OfficeColor="@OfficeColor"
                    OfficeColorChanged="@(e => { OfficeColor = e ?? OfficeColor.Default; StateHasChanged(); })"
+                   OnLoaded="@OnLoaded"
                    OnLuminanceChanged="@OnLuminanceChanged"
                    StorageName="theme" />
 
@@ -43,8 +44,13 @@
 
     public OfficeColor OfficeColor { get; set; }
 
+    void OnLoaded(LoadedEventArgs e)
+    {
+        DemoLogger.WriteLine($"Loaded: {(e.Mode == DesignThemeModes.System ? "System" : "")} {(e.IsDark ? "Dark" : "Light")}");
+    }
+
     void OnLuminanceChanged(LuminanceChangedEventArgs e)
     {
-        DemoLogger.WriteLine($"{(e.Mode == DesignThemeModes.System ? "System" : "")} {(e.IsDark ? "Dark" : "Light")}");
+        DemoLogger.WriteLine($"Changed: {(e.Mode == DesignThemeModes.System ? "System" : "")} {(e.IsDark ? "Dark" : "Light")}");
     }
 }

src/Core.Assets/src/index.ts

@@ -35,6 +35,11 @@ interface Blazor {
     registerCustomEventType: (
         name: string,
         options: CustomeventTypeOptions) => void;
+
+    theme: {
+        isSystemDark(): boolean,
+        isDarkMode(): boolean
+    }
 }
 
 interface CustomeventTypeOptions {
@@ -103,7 +108,7 @@ export function afterStarted(blazor: Blazor) {
         createEventArgs: event => {
 
             // Hacking of a fake update
-            if (event.target!.isUpdating) {                
+            if (event.target!.isUpdating) {
                 return {
                     checked: null,
                     indeterminate: null
@@ -259,6 +264,17 @@ export function afterStarted(blazor: Blazor) {
         }
     });
 
+    blazor.theme = {
+        isSystemDark: () => {
+            return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        },
+
+        isDarkMode: () => {
+            const luminance: string = getComputedStyle(document.documentElement).getPropertyValue('--base-layer-luminance');
+            return parseFloat(luminance) < 0.5;
+        }
+    }
+
     afterStartedCalled = true;
 }
 

src/Core/Components/DesignSystemProvider/FluentDesignTheme.razor.cs

@@ -89,6 +89,12 @@ public string? Direction
     [Parameter]
     public EventCallback<LuminanceChangedEventArgs> OnLuminanceChanged { get; set; }
 
+    /// <summary>
+    /// Callback raised when the component is rendered for the first time.
+    /// </summary>
+    [Parameter]
+    public EventCallback<LoadedEventArgs> OnLoaded { get; set; }
+
     /// <summary>
     /// Gets or sets the content of the component.
     /// </summary>
@@ -162,6 +168,13 @@ protected async override Task OnAfterRenderAsync(bool firstRender)
             var theme = themeJSON == null ? null : JsonSerializer.Deserialize<DataLocalStorage>(themeJSON, JSON_OPTIONS);
 
             await ApplyLocalStorageValues(theme);
+
+            if (OnLoaded.HasDelegate)
+            {
+                var realLuminance = await Module.InvokeAsync<string>("GetGlobalLuminance") ?? "1.0";
+                var isDark = Convert.ToDouble(realLuminance) < 0.5;
+                await OnLoaded.InvokeAsync(new LoadedEventArgs(Mode, isDark, CustomColor, OfficeColor, StorageName, Direction));
+            }
         }
     }
 
@@ -234,4 +247,6 @@ private class DataLocalStorage
     }
 }
 
-public record LuminanceChangedEventArgs(DesignThemeModes Mode, bool IsDark);
+public record LuminanceChangedEventArgs(DesignThemeModes Mode, bool IsDark);
+
+public record LoadedEventArgs(DesignThemeModes Mode, bool IsDark, string? CustomColor, OfficeColor? OfficeColor, string? StorageName, string? Direction);

src/Core/Components/DesignSystemProvider/FluentDesignTheme.razor.js

@@ -23,4 +23,8 @@ export function UpdateDirection(value) {
 
 export function GetDirection() {
     return document.body.dir;
+}
+
+export function GetGlobalLuminance() {
+    return getComputedStyle(document.documentElement).getPropertyValue('--base-layer-luminance');
 }