Dark/light Theme Blazor

Question

i have tied so many ways for switching Between Dark and Light Mode in Blazor.with different packages and Even Manually with css. but they never workedout For Me.can someone Give me complete guid on how can i do this?Thank

here is the latest thing i have tried with MudBlazor:

<MudThemeProvider Theme="new MudTheme()" @bind-IsDarkMode="@_isDarkMode"/>
<MudIconButton @onclick="ToggleDark" Icon="@modeIcon"/>

@code {
bool _isDarkMode = false;
private string modeIcon => _isDarkMode? Icons.Filled.DarkMode : Icons.Filled.LightMode;
private void ToggleDark() => _isDarkMode = !_isDarkMode;
}

Answer 1

so basically, this might be late, but i will post it for if someone was looking for it mudblazor docs been updated

link can be found here

<MudThemeProvider @ref="@_mudThemeProvider" @bind-IsDarkMode="@_isDarkMode"/>

@code {
    private bool _isDarkMode;
    private MudThemeProvider _mudThemeProvider;
    
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _isDarkMode = await _mudThemeProvider.GetSystemPreference();
            StateHasChanged();
        }
    }
}

basically this worked for auto theme, which is fine by me for now