MudBlazor - Blazor Component Library

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

System preference

With GetSystemDarkModeAsync() 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.GetSystemDarkModeAsync();
            StateHasChanged();
        }
    }
}

Watch system preference

WatchSystemDarkModeAsync(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.WatchSystemDarkModeAsync(OnSystemDarkModeChanged);
            StateHasChanged();
        }
    }

    private Task OnSystemDarkModeChanged(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. Palette colors are MudColor values and can be assigned from strings in hexadecimal, RGB, or RGBA format.

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

CSS Isolation Limitation

Blazor's scoped CSS (.razor.css) only applies to standard HTML elements (like <div>). It does not apply to the internal HTML generated by custom components like <MudButton>.

To style MudBlazor components, use the Class and Style parameters, global CSS, or a custom MudTheme. If you must use CSS isolation, wrap the component in a standard HTML element and use the ::deep pseudo-selector.

Theming