MudBlazor - Blazor Component Library

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.

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

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

Watch system preference

WatchSystemPreference(Func) calls Func when the system preferences change. 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)
        {
            await _mudThemeProvider.WatchSystemPreference(OnSystemPreferenceChanged);
            StateHasChanged();
        }
    }

    private Task OnSystemPreferenceChanged(bool newValue)
    {
        _isDarkMode = newValue;
        StateHasChanged();
        return Task.CompletedTask;
    }
}

Custom Themes

To customize the theme, you need to give the ThemeProvider a new MudTheme class with the settings you want to change. PaletteLight 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()
    {
        PaletteLight = new PaletteLight()
        {
            Primary = Colors.Blue.Default,
            Secondary = Colors.Green.Accent4,
            AppbarBackground = Colors.Red.Default,
        },
        PaletteDark = new PaletteDark()
        {
            Primary = Colors.Blue.Lighten1
        },

        LayoutProperties = new LayoutProperties()
        {
            DrawerWidthLeft = "260px",
            DrawerWidthRight = "300px"
        }
    };
}

Theming