MatBlazor - Material Design components for Blazor and Razor Components

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
  • First-line text Second-line text
  • First-line text Second-line text
  • First-line text Second-line text

Progress

Buffer

Indeterminate

favorite
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.

If you like MatBlazor, please put a star on GitHub.