MudBlazor UI Library Colours

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

Last but not least, 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; }

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.)