MudBlazor UI Library Colours

Question

I really would like to change the colours of MudBlazor UI Components. However, I cannot seem to override the default styles. Could someone please help me?

Variometer

Answer 1

Before we go into detail how to use CSS to style MudBlazor components, let me point you to the theming documentation.

If theming is not enough for you, you have multiple options how you can change the style of MudBlazor elements with CSS. Note, you might have to apply !important to override MudBlazor's default styles.

One way is to define your own CSS class in your main CSS file and pass your class name to the component like this:

<MudButton Class="my-class">Button with custom class</MudButton>

The second way is to directly pass CSS styles via the Style property, like documented here

<MudButton Variant="Variant.Filled" EndIcon="@Icons.Material.ArrowDownward" Style="background-color: yellowgreen; color: white; width: 200px; height: 60px;">
    Download Now
</MudButton>

Another way is to embed a <style> tag in your razor where you can even use C# variables to dynamically modify the CSS. The following example you can try out in this fiddle

<style>
    button {
       background-color: yellowgreen !important; 
       color: white !important; 
       height: @(height)px;
    }
</style>
<MudSlider @bind-Value="height" Min="30" Max="300"/>
<MudButton Variant="Variant.Filled">
    Use Slider to change my height
</MudButton>

@code {
  int height=100;
}

If you want to make use of Blazor's CSS isolation you have to make sure your page/component top level element is an html element and that you use ::deep as discussed here. This will change the text of all buttons in your component or your page to red:

::deep .mud-button-text { color: red !important; }

Last but not least, you can make use of CSS variables to override colors with your custom values. Here is an example of how to override the colors of checkboxes (try out here):

<style>
    .mud-checkbox svg path:last-child {
        fill: var(--custom-color) !important;
    }
</style>
<MudCheckBox T="bool" Style="--custom-color: #abcdef" Color="Color.Primary">Series 1</MudCheckBox>
<MudCheckBox T="bool" Style="--custom-color: cornflowerblue" Color="Color.Primary">Series 2</MudCheckBox>

Danseuse

can you please update theming documentation link? ty – Primateship

Answer 2

If you want to change the default Mudblazor colors, you can make your own theme with a custom Palette. This lets you change any of the Palette color properties as you like. Check out the examples below.

Update: The new version of MudBlazor framework has introduced new classes: PaletteLight and PaletteDark. Palette class is now obsolete. You can use the PaletteLight class to override the default colors, or use both classes to provide light and dark themes for your app.

---

Main Layout with custom colors:

MainLayout.razor:

@inherits LayoutComponentBase

<MudThemeProvider Theme="_currentTheme"/>
<MudDialogProvider/>
<MudSnackbarProvider/>

<MudLayout>
    <MudAppBar Elevation="0">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@(e => DrawerToggle())"/>
        <MudSpacer/>
    </MudAppBar>
    <MudDrawer @bind-Open="_drawerOpen" Elevation="1">
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">MyApplication</MudText>
        </MudDrawerHeader>
        <NavMenu/>
    </MudDrawer>
    <MudMainContent>
        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="my-8">
            @Body
        </MudContainer>
    </MudMainContent>
</MudLayout>

@code {
    bool _drawerOpen = true;

    private readonly MudTheme _currentTheme = new()
    {
        Palette = new PaletteLight
        {
            Primary = "#0A7BCF",
            Secondary = "#4CAF50",
            Info = "#64a7e2",
            Success = "#2ECC40",
            Warning = "#FFC107",
            Error = "#FF0000",
            AppbarBackground = "#212121",
            TextPrimary = "#0A7BCF",
            TextSecondary = "#4CAF50",
            // more color properties
        }
    };

    void DrawerToggle() => _drawerOpen = !_drawerOpen;
}

---

Main Layout with Dark Theme:

MainLayout.razor:

@inherits LayoutComponentBase

<MudThemeProvider @ref="@_mudThemeProvider" @bind-IsDarkMode="@_isDarkMode" Theme="_currentTheme"/>
<MudDialogProvider/>
<MudSnackbarProvider/>

<MudLayout>
    <MudAppBar Elevation="0">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@(e => DrawerToggle())"/>
        <MudSpacer/>
        <MudIconButton Icon="@Icons.Material.Filled.Brightness4"
                       Color="Color.Inherit"
                       Class="nav-button"
                       OnClick="@ThemeToggle"/>
    </MudAppBar>
    <MudDrawer @bind-Open="_drawerOpen" Elevation="1">
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">MyApplication</MudText>
        </MudDrawerHeader>
        <NavMenu/>
    </MudDrawer>
    <MudMainContent>
        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="my-8">
            @Body
        </MudContainer>
    </MudMainContent>
</MudLayout>

@code {
    bool _drawerOpen = true;
    private bool _isDarkMode;
    private MudThemeProvider _mudThemeProvider;

    private readonly MudTheme _currentTheme = new()
    {
        Palette = new PaletteLight
        {
            Primary = "#0A7BCF",
            Secondary = "#4CAF50",
            Info = "#64a7e2",
            Success = "#2ECC40",
            Warning = "#FFC107",
            Error = "#FF0000",
            AppbarBackground = "#212121",
            TextPrimary = "#0A7BCF",
            TextSecondary = "#4CAF50",
            // more color properties
        },
        PaletteDark = new PaletteDark
        {
            Primary = "#6585e0",
            Secondary = "#607D8B",
            Info = "#a4c2dd",
            Success = "#2ECC40",
            Warning = "#dc2d7e",
            Error = "#de2000",
            AppbarBackground = "#121212",
            TextPrimary = "#E0E0E0",
            TextSecondary = "#BDBDBD",
            // more color properties
        }
    };

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _isDarkMode = await _mudThemeProvider.GetSystemPreference();
            StateHasChanged();
        }
    }

    void DrawerToggle() => _drawerOpen = !_drawerOpen;
    void ThemeToggle() => _isDarkMode = !_isDarkMode;

}

Index.razor:

@page "/"

<PageTitle>Index</PageTitle>
<MudText Typo="Typo.h2" Class="mb-5">Theme Colors</MudText>

<MudStack Row="true">
    <MudButton Color="Color.Primary" Variant="Variant.Filled">Primary Button</MudButton>
    <MudButton Color="Color.Secondary" Variant="Variant.Filled">Secondary Button</MudButton>
    <MudButton Color="Color.Success" Variant="Variant.Filled">Success Button</MudButton>
    <MudButton Color="Color.Warning" Variant="Variant.Filled">Warning Button</MudButton>
    <MudButton Color="Color.Error" Variant="Variant.Filled">Error Button</MudButton>
</MudStack>
<br/>
<MudAlert Severity="Severity.Normal">The reactor type is RBMK-1000</MudAlert>
<MudAlert Severity="Severity.Info">The reactor was fired up successfully</MudAlert>
<MudAlert Severity="Severity.Success">The reactor is running at optimum temperature</MudAlert>
<MudAlert Severity="Severity.Warning">The reactor temperature exceeds the optimal range</MudAlert>
<MudAlert Severity="Severity.Error">Meltdown is imminent</MudAlert>

Demo with Dark Mode:

Agnosia

This is easily the best answer – Juline

Yes. MudBlazor calculates the colors programmatically based on the ones you give as in Ibrahim's example. So other variables, like the "lighten" and "darken" variations of colors will work. Although it is possible to override these by CSS, it's the uninformed (half-)solution to do so. – Satrap

Answer 3

If you want to change the whole color theme, but at the same time want to keep the consistency of when and how which color compositions are applied (according to the .mud-* classes), you could override MudBlazor's CSS variables (--mud-*) for your whole solution.

As an example, when you use <MudButton Color="Color.Primary"> </MudButton>, your button element will automatically get the class composition .mud-button-text.mud-button-text-primary applied. This class composition then applies the styling: color: var(--mud-palette-primary);. By overriding the value of --mud-palette-primary at root level, you will have changed it for your whole solution; resulting in, e.g., another text color for your MudButton element with Color.Primary.

In your global CSS file, the CSS variables can be overridden as follows:

:root {
    --mud-palette-primary: violet;
    --mud-palette-primary-text: yellow;
}

HEX values can also be used, as for any other CSS color property value.

This will probably be a thurough job if the whole palette is to be changed, but no custom classes or !importants will then be needed.

On the downside, MudBlazor is guaranteed to change their use (and probably, their selection) of CSS variables with newer versions; so this variable overriding will need maintenance over time. (Then again, so will any other possible solution I can think of.)

Example snippet to quickly try it out here.

(Note: In the example snippet, the property Variant is set on the MudButton element in addition to Color; this sets a different set of classes, which again applies styling using the MudBlazor CSS variables differently.)

Serge

this method overrides variables for both dark and light scenarios meaning if you do --mud-palette-primary: violet; primary will be violet in dark and light theme – Primateship