MatBlazor - Material Design components for Blazor

MatThemeProvider

The Material Design color system can be used to create a color theme that reflects your brand or style.

Name	Type	Description
ChildContent	RenderFragment	Child content of MatThemeProvider
Theme	MatTheme

MatTheme

Name	Type	Description
Background	String	The theme background color
Id	String
OnPrimary	String	Text color on top of a primary background
OnSecondary	String	Text color on top of a secondary background
OnSurface	String	Text color on top of a surface background
Primary	String	The theme primary color
Secondary	String	The theme secondary color
Surface	String	The theme surface color

Primary Secondary Surface

Checked

Unchecked

First-line text Second-line text
First-line text Second-line text
First-line text Second-line text

Progress

Buffer

Indeterminate

Pick a Food Group

Standard Icon

Examples

Real use

To apply theme for all application you can use MatThemeProvider in MainLayout.razor or App.razor

Official color tool

The Material Design team has also built an awesome palette configuration tool: material.io/tools/color. This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.