Mode d’emploi
- Copiez la commande et examinez le paquet avant de l’installer dans votre environnement agent.
- Consultez le document original pour les outils, identifiants et environnements requis.
- Décrivez les entrées et le livrable souhaité ; comparez la sortie aux sources.
npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-themesAvant de commencer
- L’installation n’inclut ni abonnement au modèle, ni quota API, ni accès aux fichiers.
- Étoiles et installations reflètent l’activité, pas un test indépendant de qualité ou de sécurité.
Document Skill original
Rendu depuis le dépôt source en conservant titres, exemples, code, tableaux, liens et images.
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})
);
