Search code examples
.net-coreblazorblazor-webassemblymudblazor

Extend MudBlazor palettes

I have a .NET 7 Blazor Webassembly app that uses MudBlazor (newest version).

I would like to derive from the MudBlazor palette class in order to create a palette with more "MudColors", eg. colors for graphs that I want to define for both dark and light modes, and be able to access these new colors both in C# and by using CSS classes.

I haven't been able to find any documentation relating to this.

Solution

  • You can find the documentation here: https://mudblazor.com/customization/overview#custom-themes

    It is currently not possible to add new colors to the palet, but you can use mud colors like this in your css color: var(--mud-palette-primary).

    To add custom colors, you can add a class to the root if your layout.razor. <div class="@(_isDarkMode ? "--root-dark" : "")">

    And add those styles to a custom stylesheet like this:

    :root {
    --custom-color: #518ebd;
}
.--root-dark {
    --custom-color: #383737;
}