MainLayout.razor

@inherits LayoutComponentBase
@using CleanArchitecture.Blazor.Server.UI.Services.JsInterop
@using CleanArchitecture.Blazor.Server.UI.Themes
@implements IDisposable
@inject LayoutService LayoutService
<PageTitle>@ApplicationSettings.AppName</PageTitle>
<MudRTLProvider RightToLeft="@LayoutService.IsRTL">
    <MudThemeProvider />
    <MudPopoverProvider />
    <MudDialogProvider />
    <MudSnackbarProvider />
    <MudThemeProvider @ref="@_mudThemeProvider" Theme="@LayoutService.CurrentTheme" IsDarkMode="@LayoutService.IsDarkMode" IsDarkModeChanged="@LayoutService.SetDarkMode" />

        @Body

</MudRTLProvider>

@code
{
    private MudThemeProvider _mudThemeProvider = null!;
    private bool _defaultDarkMode;
    public void Dispose()
    {
        LayoutService.MajorUpdateOccured -= LayoutServiceOnMajorUpdateOccured;
        GC.SuppressFinalize(this);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if (firstRender)
        {
            await ApplyUserPreferences();
            StateHasChanged();
        }
    }

    private async Task ApplyUserPreferences()
    {
        _defaultDarkMode = await _mudThemeProvider.GetSystemDarkModeAsync();
        await LayoutService.ApplyUserPreferences(_defaultDarkMode);
    }

    protected override Task OnInitializedAsync()
    {
        LayoutService.MajorUpdateOccured += LayoutServiceOnMajorUpdateOccured;
        LayoutService.SetBaseTheme(Theme.ApplicationTheme());
        return base.OnInitializedAsync();
    }

    private void LayoutServiceOnMajorUpdateOccured(object? sender, EventArgs e)
    {
        InvokeAsync(() => StateHasChanged());
    }

}