Theming
Customize the appearance of your components using themes. Change colors, styles, and branding to match your design system.
Use this example to explore default behavior, customization points, and accessibility-friendly patterns in a real Blazor page.
Theme Provider
MgThemeProviderThe MgThemeProvider component sets up the theme context for all MgLibrary components. Define custom themes or use predefined Material Design themes.
API Reference
MgThemeProvider
| Property | Type | Default | Description |
|---|---|---|---|
| Theme | MgTheme | new MgTheme() | The theme instance to apply to the application. |
| IsDarkMode | bool | false | Toggles between light and dark variants of the current theme. |
| ThemeOverrides | IDictionary<string, string> | null | Allows overriding specific theme colors without creating a new class. |
| ThemeClass | string | null | Optional CSS class to wrap the application content. |
| SuppressInternalStyles | bool | false | If true, prevents the component from injecting <style> tags. |
Components Using Current Theme
These components automatically use the active theme colors:
Themed Buttons
Themed Card
Theme Demo Card
This card uses the active theme colors for its styling and appearance.
Themed Chips
Primary
Outlined
Disabled
Theme Integration
All MgLibrary components automatically apply the current theme.