Theming

Customize MudBlazor so that it suits your needs. Change colors, typography, shapes and more.

Theme Provider

The Theme provider specifies all the colors, shapes, sizes and shadows to 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.

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 in MudTheme. Just set IsDarkMode to true.

This is an example text!

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

With GetSystemPreference() you can get the user defined dark theme preference. Returns true if dark mode is preferred.

<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();
        }
    }
}
Custom Themes

To customize the theme, you need to give the ThemeProvider a new MudTheme class with the settings you want to change. Palette defines the color of the Light Palette. PaletteDark on the other hand defines the colors of the Dark Palette.

<MudThemeProvider Theme="MyCustomTheme" />
@code{
    MudTheme MyCustomTheme = new MudTheme()
    {
        Palette = new Palette()
        {
            Primary = Colors.Blue.Default,
            Secondary = Colors.Green.Accent4,
            AppbarBackground = Colors.Red.Default,
        },
        PaletteDark = new Palette()
        {
            Primary = Colors.Blue.Lighten1
        },

        LayoutProperties = new LayoutProperties()
        {
            DrawerWidthLeft = "260px",
            DrawerWidthRight = "300px"
        }
    };
}
An unhandled error has occurred. Reload 🗙