Export MudBlazor Theme

Export MudBlazor Theme

This page will help you export your MudBlazor theme to use in your application. It will provide you with a C# class to reference in your application or CSS files to include in your application. Expand one of the panels to get more information. If you change anything in the theme or select a new theme it will automatically update the values.

Theme Class MudBlazor v7.x.x in C#
Instructions
This will show a C# class you can place somewhere in your application and reference from ThemeProvider in your MainLayout.razor.
  1. Copy the Contents below, copy icon is in upper right.
  2. In Visual Studio "Add Class" if you do not already have a custom theme class.
  3. Name that Class something like DefaultThemes or CustomThemes as you wish
  4. Inside the class paste the contents of your clipboard, making sure to update the themename
    • - public static readonly MudTheme [ThemeNameHere]
Theme Class MudBlazor v8.x.x in C#
Instructions
This will show a C# class you can place somewhere in your application and reference from ThemeProvider in your MainLayout.razor.
  1. Copy the Contents below, copy icon is in upper right.
  2. In Visual Studio "Add Class" if you do not already have a custom theme class.
  3. Name that Class something like DefaultThemes or CustomThemes as you wish
  4. Inside the class paste the contents of your clipboard, making sure to update the themename
    • - public static readonly MudTheme [ThemeNameHere]
CSS Classes
Instructions
Copy each of these into a separate CSS file you can place in your application's wwwroot folder, then add the following line to your App.razor/Index.html. It's purpose is to overwrite all the variables MudBlazor uses to theme components except for light/dark mode.
In your MainLayout or other layout file add a section:
Then add a boolean isDark to output dark or light mode CSS depending on your need. If you don't plan to offer both, then just include the -light or -dark in your App.razor.
Static CSS
Dark Mode CSS
Light Mode CSS