mcpField
S
syncfusion-blazor-themes

syncfusion-blazor-themes

github.com/syncfusionDesign & UI4391 installsUpdated 1w ago
Repository

About syncfusion-blazor-themes

A guide to applying and customizing Syncfusion component themes in Blazor apps, for developers adjusting appearance and CSS output. It covers Theme Studio, SCSS overrides, lightweight variants, and reuse of saved settings.

Key features

  1. 01Apply Material 3, Bootstrap 5, and other themes
  2. 02Adjust colors with Theme Studio
  3. 03Filter CSS to selected components
  4. 04Override themes with Sass variables and CSS properties
  5. 05Reuse settings.json configurations
  6. 06Choose lightweight themes without web fonts

Use cases

  1. 01Configure a built-in theme for a Blazor app
  2. 02Generate CSS for only the components in use
  3. 03Customize theme variables with SCSS
  4. 04Save and reuse theme settings

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-themes

After installing, type/syncfusion-blazor-themesin Claude Code to confirm it loaded.

Bundled filesreferences/theme-appearance.md

Details

From the project README

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

Available Themes at a Glance

ThemeDescription
Material 3Google Material Design 3 (recommended default)
Bootstrap 5Bootstrap 5 design system
Fluent / Fluent 2Microsoft Fluent Design System
Tailwind CSSTailwind CSS design tokens
Bootstrap 4Bootstrap 4 design system
MaterialOriginal Material Design
High ContrastWCAG-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})
);

Comments

Markdown supported