How to use
- Copy the installation command and review the source package before installing it in your own agent environment.
- Check the source document for required tools, credentials and supported hosts.
- Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-themesBefore you start
- Installation does not include a model subscription, API allowance or permission to access your files.
- Repository stars and installation counts describe activity, not an independent quality or security test.
Original skill document
Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.
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
@useand 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
- Full Theme Studio guide: See theme-appearance.md
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:
html
<link href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />Blazor WebAssembly Standalone
Add to <head> in wwwroot/index.html:
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, andsettings.json - Copy the CSS to
~/wwwroot/styles/and reference it in your host page - Save
settings.jsonto version control for future updates
SCSS Variable Override Example
scss
/* Custom.scss */
:root {
--color-primary-override: 54, 34, 89;
}
@use 'material3.scss' with (
$primary: var(#{--color-primary-override})
);
