| name | syncfusion-blazor-themes |
| description | Customize and apply Syncfusion Blazor themes — Theme Studio color customization, CSS/SCSS integration, lightweight themes, component filtering, and Sass variable overrides |
| metadata | {"author":"Syncfusion Inc","version":"34.1.29"} |
Syncfusion Blazor Themes
Complete guidance for applying and customizing Syncfusion Blazor component themes using Theme Studio, SCSS overrides, and production-ready best practices.
When to Use
Use this skill when you need to:
- Apply a built-in Syncfusion theme (Material 3, Bootstrap 5, Fluent, Tailwind, etc.)
- Customize theme colors interactively using Theme Studio
- Generate a filtered, minimal CSS bundle for only the components you use
- Override theme variables with Sass
@use and CSS custom properties
- Use lightweight theme variants to reduce bundle size
- Import and re-use saved theme settings (
settings.json)
Do NOT use for:
- Initial Blazor project setup → use
syncfusion-blazor-common
- Script loading and CRG bundles → use
syncfusion-blazor-common
- CSP configuration for stylesheets → use
syncfusion-blazor-security
Quick Reference
Available Themes at a Glance
| Theme | Description |
|---|
| Material 3 | Google Material Design 3 (recommended default) |
| Bootstrap 5 | Bootstrap 5 design system |
| Fluent / Fluent 2 | Microsoft Fluent Design System |
| Tailwind CSS | Tailwind CSS design tokens |
| Bootstrap 4 | Bootstrap 4 design system |
| Material | Original Material Design |
| High Contrast | WCAG-compliant accessible theme |
Lightweight variants (e.g., fluent2-lite.css) exclude web fonts — ideal for offline or bandwidth-constrained environments.
Quick Setup: Add a Theme
Blazor Web App (.NET 8+)
Add to <head> in ~/Components/App.razor:
<link href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />
Blazor WebAssembly Standalone
Add to <head> in wwwroot/index.html:
<link href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />
⚠️ Important: Only reference one Syncfusion base theme at a time to avoid style conflicts.
Theme Studio Workflow
- Open Blazor Theme Studio
- Select a base theme and customize colors with live preview
- Filter to include only the components used in your app (reduces CSS size)
- Download the package — includes
.css, .scss, and settings.json
- Copy the CSS to
~/wwwroot/styles/ and reference it in your host page
- Save
settings.json to version control for future updates
SCSS Variable Override Example
:root {
--color-primary-override: 54, 34, 89;
}
@use 'material3.scss' with (
$primary: var(#{--color-primary-override})
);
