MudBlazor

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" />

Custom Themes

To customize the theme, you need to give the ThemeProvider a new MudTheme class with the settings you want to change.

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

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

This way, you only need to change the stuff you don't like in our default theme, but you can replace all the defaults completely if you want to.

Multiple Themes

You can have multiple themes applied in different ways but this is how we apply our dark theme on the MudBlazor page.

<MudThemeProvider Theme="currentTheme" />

<MudButton OnClick="@((e) => DarkMode())">Toggle Dark/Light Mode</MudButton>
@code{

    protected override void OnInitialized()
    {
        currentTheme = defaultTheme;
    }

    void DarkMode()
    {
        if (currentTheme == defaultTheme)
        {
            currentTheme = darkTheme;
        }
        else
        {
            currentTheme = defaultTheme;
        }
    }

    MudTheme currentTheme = new MudTheme();
    MudTheme defaultTheme = new MudTheme()
    {
        Palette = new Palette()
        {
            Black = "#272c34"
        }
    };

    MudTheme darkTheme = new MudTheme()
    {
        Palette = new Palette()
        {
            Black = "#27272f",
            Background = "#32333d",
            BackgroundGrey = "#27272f",
            Surface = "#373740",
            DrawerBackground = "#27272f",
            DrawerText = "rgba(255,255,255, 0.50)",
            DrawerIcon = "rgba(255,255,255, 0.50)",
            AppbarBackground = "#27272f",
            AppbarText = "rgba(255,255,255, 0.70)",
            TextPrimary = "rgba(255,255,255, 0.70)",
            TextSecondary = "rgba(255,255,255, 0.50)",
            ActionDefault = "#adadb1",
            ActionDisabled = "rgba(255,255,255, 0.26)",
            ActionDisabledBackground = "rgba(255,255,255, 0.12)",
            Divider = "rgba(255,255,255, 0.12)",
            DividerLight = "rgba(255,255,255, 0.06)",
            TableLines = "rgba(255,255,255, 0.12)",
            LinesDefault = "rgba(255,255,255, 0.12)",
            LinesInputs = "rgba(255,255,255, 0.3)",
            TextDisabled = "rgba(255,255,255, 0.2)"
        }
    };
}

An error has occurred. This application may no longer respond until reloaded. Reload 🗙