syncfusion-blazor-themes

Original：🇺🇸 English

Translated

Customize and apply Syncfusion Blazor themes — Theme Studio color customization, CSS/SCSS integration, lightweight themes, component filtering, and Sass variable overrides

2installs

Sourcesyncfusion/blazor-ui-components-skills

Added on2026-04-02

NPX Install

npx skill4agent add syncfusion/blazor-ui-components-skills syncfusion-blazor-themes

SKILL.md Content

View Translation Comparison →

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

:

html

<link href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />

Blazor WebAssembly Standalone