MudBlazor darkmode toggle not working
I just want to check system preferences on load for the theme, but also allow the user to change from dark to light mode whenever they want. The toggle just doesn't work. I click on it and nothing happens.
@inherits LayoutComponentBase
<MudThemeProvider @ref="@provider" @bind-IsDarkMode="@useDarkMode" />
<MudDialogProvider />
<MudSnackbarProvider />
<MudLayout>
<MudAppBar Elevation="1">
<MudText Typo="Typo.h5" Class="ml-3">[Text Here]</MudText>
<MudSpacer/>
<MudSwitch
@bind-Value="useDarkMode"
Color="Color.Primary" Class="ma-4"
T="bool" Label="Toggle Light/Dark Mode" />
<MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End"/>
</MudAppBar>
<MudMainContent>
@Body
</MudMainContent>
</MudLayout>
@code {
private bool useDarkMode;
private MudThemeProvider provider;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
useDarkMode = await provider.GetSystemPreference();
await provider.WatchSystemPreference(OnSystemPreferenceChanged);
StateHasChanged();
}
}
private async Task OnSystemPreferenceChanged(bool newValue)
{
useDarkMode = newValue;
StateHasChanged();
}
}
@inherits LayoutComponentBase
<MudThemeProvider @ref="@provider" @bind-IsDarkMode="@useDarkMode" />
<MudDialogProvider />
<MudSnackbarProvider />
<MudLayout>
<MudAppBar Elevation="1">
<MudText Typo="Typo.h5" Class="ml-3">[Text Here]</MudText>
<MudSpacer/>
<MudSwitch
@bind-Value="useDarkMode"
Color="Color.Primary" Class="ma-4"
T="bool" Label="Toggle Light/Dark Mode" />
<MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End"/>
</MudAppBar>
<MudMainContent>
@Body
</MudMainContent>
</MudLayout>
@code {
private bool useDarkMode;
private MudThemeProvider provider;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
useDarkMode = await provider.GetSystemPreference();
await provider.WatchSystemPreference(OnSystemPreferenceChanged);
StateHasChanged();
}
}
private async Task OnSystemPreferenceChanged(bool newValue)
{
useDarkMode = newValue;
StateHasChanged();
}
}
