Theming - MudBlazor

Theme Provider

The ThemeProvider specifies all the colors, shapes, sizes, and shadows for your layout. No configuration or theme is needed. By default, it will use MudBlazor's default theme.

<MudThemeProvider />

Variables

At the moment, it's possible to change the following theme types.

Palette
Shadows
Typography
Layout Properties
z-index
Pseudo CSS scope
Pseudo CSS

You can find all the Default Theme values under customization.

Scrollbar

The MudBlazor styled scrollbar can be turned off in the ThemeProvider with the DefaultScrollbar property.

<MudThemeProvider DefaultScrollbar="true" />

Dark Palette

Dark palettes are integrated into MudTheme. Just set IsDarkMode to true.

Toggle Light/Dark Mode

This is an example text!

<MudThemeProvider @bind-IsDarkMode="@_isDarkMode" Theme="_theme"/>
<MudSwitch @bind-Value="_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;
}