'Dark/light Theme Blazor

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;
}

Solution 1:^[1]

I struggled with this as well. The MudBlazor docs neglect to inform you that you must call StateHasChanged() from the layout component (MainLayout) after toggling IsDarkMode. I discovered this after researching how their documentation website works. Look at (https://github.com/MudBlazor/MudBlazor/blob/d05b8d0ef3480c69a7db754d0d8ce9abdbd544ad/src/MudBlazor.Docs/Shared/MainLayout.razor.cs)

The operative code is (edited):

public partial class MainLayout : LayoutComponentBase, IDisposable
{ 
   [Inject] private  LayoutService LayoutService { get; set; }
   
   private MudThemeProvider _mudThemeProvider;

   protected override void OnInitialized()
   {
       LayoutService.MajorUpdateOccured += LayoutServiceOnMajorUpdateOccured;
       base.OnInitialized();
   }

   public void Dispose()
   {
       LayoutService.MajorUpdateOccured -= LayoutServiceOnMajorUpdateOccured;
   }

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

Note that MainLayout subscribes to the MajorUpdateOccured event and calls StateHasChanged when the event is invoked.

If you look at LayoutService (https://github.com/MudBlazor/MudBlazor/blob/d05b8d0ef3480c69a7db754d0d8ce9abdbd544ad/src/MudBlazor.Docs/Services/LayoutService.cs), you will see how ToggleDarkMode works

public event EventHandler MajorUpdateOccured;

private void OnMajorUpdateOccured() => MajorUpdateOccured?.Invoke(this,EventArgs.Empty);

public async Task ToggleDarkMode()
{
   IsDarkMode = !IsDarkMode;
   _userPreferences.DarkTheme = IsDarkMode;
   await _userPreferencesService.SaveUserPreferences(_userPreferences);
   OnMajorUpdateOccured();
}

In summary, you have to call StateHasChanged from the layout so that the entire site is re-rendered. So you have to provide a way to propagate the dark mode change from your settings screen to your layout component.

Solution 2:^[2]

you should give a condition in class. so in your claas:



<div class="light ? class : class2"></div>


export defaut{
data(){
return {
light : true;
}
}

Solution 3:^[3]

Here's an example:

<MudThemeProvider @bind-IsDarkMode="@_isDarkMode" Theme="_theme"/>
<MudSwitch @bind-Checked="@_isDarkMode" Color="Color.Primary" Class="ma-4" T="bool" Label="Toggle Light/Dark Mode"/>

<MudText Class="ma-4">This is an example text!</MudText>

@code{
    private MudTheme _theme = new();
    private bool _isDarkMode;
}

Source:

https://dev.mudblazor.com/customization/overview#dark-palette

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ron Peters
Solution 2	Arif Aminudin
Solution 3	Quickz

'Dark/light Theme Blazor

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]