MudBlazor - Blazor Component Library

Theme Palette Colors

Each palette color gets converted to a class with the color as background and its contrast, but also separate classes for only background or text color. The CSS class is bound to the MudBlazor theme and updated if you change the theme dynamicly.

You can read more about theming MudBlazor here.

CSS and Theme colors

Here we add each class to the divs to change the background color, text color and both background and text color with one class only.

.mud-info

.mud-secondary-text

.mud-theme-primary

<MudPaper Class="pa-4 mud-info">.mud-info</MudPaper>
<MudPaper Class="pa-4 mud-secondary-text">.mud-secondary-text</MudPaper>
<MudPaper Class="pa-4 mud-theme-primary">.mud-theme-primary</MudPaper>

CSharp and Theme colors

You can also access the colors with blazor directly like we do in this example.

Warning with Dark text

Dark with Success lighten

<MudPaper Class="pa-4" Style="@($"color:{Theme.PaletteLight.Dark}; background:{Theme.PaletteLight.Warning};")">
    Warning with Dark text
</MudPaper>
<MudPaper Class="pa-4" Style="@($"color:{Theme.PaletteLight.SuccessLighten}; background:{Theme.PaletteLight.Dark};")">
    Dark with Success lighten
</MudPaper>

@code {
    private MudTheme Theme = new MudTheme();
}

Material Colors

All Material colors, as well as background and text variants, are available for use in your application.