syncfusion-blazor-themes

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

• 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:

<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

1. Open Blazor Theme Studio
2. Select a base theme and customize colors with live preview
3. Filter to include only the components used in your app (reduces CSS size)
4. Download the package — includes .css, .scss, and settings.json
5. Copy the CSS to ~/wwwroot/styles/ and reference it in your host page
6. Save settings.json to version control for future updates

SCSS Variable Override Example

/* Custom.scss */
:root {
  --color-primary-override: 54, 34, 89;
}

@use 'material3.scss' with (
  $primary: var(#{--color-primary-override})
);