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(); } }
<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(); } }
11 Replies
which .net version are you using?
.net8 with interactive auto
does that mean my whole layout has to go in the .Client project if i want interactivity in it?
<HeadOutlet @rendermode="InteractiveServer" />
<Routes @rendermode="InteractiveServer" />
i changed those by adding the @rendermode tag but I'm not sure that's what I want to be doing.
so did taht allow it to work?
yes it did
yeah, that should make the entire app interactive server
idk if that's what u want or not
haha yea i want to have it be interactive auto
so ig i move the layout to the Client project
will there be any side effects to that?
haven't really messed with auto myself so can't say
try it an see...just monitor what is being downloaded
wait so for interactive auto... is everything that's not in the Client app static SSR??
as far as i'm aware it should be interactive server side
wait so then why doesnt the toggle work
¯\_(ツ)_/¯