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