MudBlazor UI Components come with a clean Material Design look out of the box, but the real power is how easy they are to reshape. A single MudTheme object controls colors, typography, spacing, and elevation for every component in the application, and a MudThemeProvider applies it at runtime — including a full dark mode. This article shows how Indotalent's products use theming to match each brand while shipping one consistent UI.
The beauty of MudBlazor's approach is that you never touch CSS per component. Define the theme once, pass it to the provider, and every button, input, card, and dialog inherits the design language. When a customer asks for a different accent color, it is a one-line change, not a redesign.
Building a Custom MudTheme for MudBlazor UI Components
Start by creating a MudTheme in C# and setting the palettes. The light palette defines brand colors, app bar colors, and surface backgrounds; the dark palette defines the same roles for dark mode. Because both palettes are set, every MudBlazor UI component renders correctly in both themes.
public static readonly MudTheme BrandTheme = new MudTheme
{
PaletteLight = new PaletteLight
{
Primary = "#f97316",
Secondary = "#ea580c",
AppbarBackground = "#0b1220",
AppbarText = "#ffffff",
Background = "#f7f8fa"
},
PaletteDark = new PaletteDark
{
Primary = "#fb923c",
Secondary = "#fdba74",
AppbarBackground = "#0b1220",
Background = "#121212"
},
LayoutProperties = new LayoutProperties
{
DefaultBorderRadius = "8px"
}
};Wire it up once in the main layout. The MudThemeProvider wraps your app shell and applies the theme through cascading parameters, so dialogs, snackbars, and popovers opened anywhere in the tree stay consistent.
Typography and Spacing Across MudBlazor UI Components
Consistent typography is what separates a themed app from a default one. The Typography section of MudTheme defines the full type scale — H1 through H6, body text, captions, and buttons — as well as font weight and letter spacing. Update it once and every heading in the app follows.
Theme.Typography = new Typography
{
H1 = new DefaultTypography
{
FontSize = "2.25rem",
FontWeight = 700,
LineHeight = 1.3
},
Button = new ButtonTypography
{
TextTransform = "none",
FontWeight = 600
}
};Spacing is handled through LayoutProperties like DefaultBorderRadius and through the elevation values on surfaces. Combined with the two palettes, this is the whole theming surface: colors, type, radius, and elevation. Everything else is inherited by the components automatically.
Elevation works the same way. MudBlazor components resolve their shadows and surface depth from the theme, so cards, dialogs, and drawers share one visual hierarchy. Raise the elevation of a card in one place and the whole dashboard feels more layered without any per-component CSS.
Dark Mode with MudThemeProvider
Dark mode is not a separate feature in MudBlazor — it is simply the dark palette applied by the provider. Bind the provider's DarkMode property to a field, flip it from a toggle, and set PersistToLocalStorage so the browser remembers the choice on the next visit. A practical touch is to respect the operating system's preference on the first visit, then let the explicit choice win afterwards.
<MudThemeProvider Theme="BrandTheme"
@bind-DarkMode="_isDark"
PersistToLocalStorage="true" />
<MudAppBar>
<MudIconButton Icon="@Icons.Material.Filled.LightMode"
OnClick="ToggleDarkMode" />
</MudAppBar>
@code {
private bool _isDark;
private void ToggleDarkMode() => _isDark = !_isDark;
}- Define both
PaletteLightandPaletteDarkwith the same brand colors - Bind
DarkModetwo-way on the provider and toggle it from a button - Set
PersistToLocalStorage="true"so the preference survives reloads - Honor the system preference first, then the explicit user choice
Scoped Overrides for Edge Cases
The theme handles 99% of the design. For the remaining edge cases, every MudBlazor UI component exposes Class and Style attributes, and the underlying elements carry mud-* CSS classes you can target. Keep these overrides scoped and minimal; when you find yourself writing the same override in five places, promote it back into the theme instead. A good rule of thumb: if an override appears more than twice, it belongs in the theme.
Theming for Multi-Tenant and White-Label Apps
MudBlazor UI Components make white-labeling straightforward because the theme is just a C# object. A SaaS application can build a theme per tenant at startup — swapping primary and app bar colors from the tenant's settings — and pass it to the provider. Indotalent's SaaS multi-tenant CRM and HRM editions use exactly this approach: each tenant sees its own brand colors while every tenant runs the same code. Because the palette is resolved at render time, changing a tenant's theme is a configuration change, not a redeployment.
Key Takeaways
- One MudTheme object styles every MudBlazor UI component
- PaletteLight and PaletteDark define light mode and dark mode in one place
- Typography and LayoutProperties control the full type scale and radius
- MudThemeProvider with two-way DarkMode binding adds a persisted toggle
- Every Indotalent product ships this theming setup with MudBlazor UI Components
FAQ
Does dark mode work on Blazor Server?
Yes. The theme is part of the render tree, so the provider and the toggle work identically on Blazor Server and WebAssembly. The preference is persisted to browser localStorage through the SignalR circuit.
Can I mix MudBlazor UI Components with my own CSS?
Yes. Use the Class and Style attributes on any component, or target the generated mud-* classes. Keep overrides scoped so the theme stays the single source of truth.
Do all components respect the theme automatically?
Yes. Colors, typography, elevation, and border radius are resolved from the MudTheme through cascading parameters, which is why one theme change restyles the entire application consistently.