사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-themes시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
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})
);
