ComponentsTheming and globalization

Theme

MudThemeProvider turns a MudTheme into CSS variables that every component reads: palette, typography, shape and shadows. Change the theme once instead of styling components one by one.

MudThemeProvider
MudTheme
PaletteLight
PaletteDark
Typography
LayoutProperties
MudBlazor reference ↗
Page source ↗

The palette, as CSS variables

Each palette color becomes a --mud-palette-* variable on the page. These swatches read the variables directly, so the dark-mode switch in the app bar changes them all at once.

Brand

Primary

--mud-palette-primary

Secondary

--mud-palette-secondary

Tertiary

--mud-palette-tertiary

Status

Info

--mud-palette-info

Success

--mud-palette-success

Warning

--mud-palette-warning

Error

--mud-palette-error

Dark

--mud-palette-dark

Surfaces

Background

--mud-palette-background

Surface

--mud-palette-surface

Appbar background

--mud-palette-appbar-background

Drawer background

--mud-palette-drawer-background

Text and lines

Text primary

--mud-palette-text-primary

Text secondary

--mud-palette-text-secondary

Action default

--mud-palette-action-default

Lines default

--mud-palette-lines-default

Lines inputs

--mud-palette-lines-inputs

Divider

--mud-palette-divider

Theme builder

Pick colors and a corner radius, check the contrast, and copy the MudTheme. The preview overrides the same variables on its own container, so the rest of this page keeps the site's theme.

Night tours

Book a guided evening at the observatory.

Your email

Clear skies

Moonless

Remind me

Primary

Secondary

Corner radius: 6 px

Dark surface

Text on primary: 5.5:1 · primary on surface: 5.3:1

private readonly MudTheme _theme = new()
{
    PaletteLight = new PaletteLight
    {
        Primary = "#b4441f",
        Secondary = "#1f5f5b"
    },
    LayoutProperties = new LayoutProperties { DefaultBorderRadius = "6px" }
};

<MudThemeProvider Theme="_theme" />

Your own CSS, theme-aware

Use the palette variables in your own styles and they follow the theme, including dark mode, with no extra code.

Seeing

1.4″

Humidity

82%

Wind

31 km/h

Sky quality

21.3