Syncfusion aspnetmvc theme

Skill syncfusion/aspnetmvc-ui-components-skills/skills/syncfusion-aspnetmvc-theme

This repository contains AI Skills of ASPNET MVC UI Components.

Install

npx -y skills add syncfusion/aspnetmvc-ui-components-skills --skill syncfusion-aspnetmvc-theme

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

3 things to look at

20 days oldThe repository was created 20 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

**THEMING & APPEARANCE GUIDE** — Assist with Syncfusion ASP.NET MVC EJ2 component theming, customization, size modes, dynamic theme switching, and icon integration. Use when: applying themes (Bootstrap, Material, Tailwind, Fluent, etc.), customizing via SCSS or Theme Studio, enabling touch/size modes, or managing appearance dynamically.

SKILL.md

4.8 KB, ~1.0k tokens by cl100k_base, as published. Nobody here has run it

Syncfusion ASP.NET MVC — Theming & Appearance

High-level guidance for theme selection, delivery methods, size modes, and appearance customization. Detailed examples, SCSS patterns, Theme Studio usage, icon integration, and dynamic switching code live in the references.

When to Use

Choosing or applying a theme (Bootstrap, Material, Tailwind, Fluent, Fabric, High Contrast, etc.)
Customizing themes via Theme Studio or SCSS overrides
Implementing dynamic theme switching at runtime
Enabling touch mode (.e-bigger) for accessibility and mobile responsiveness
Customizing component sizes, colors, fonts, or other visual properties
Integrating Syncfusion icons or custom icon sets
Supporting dark mode/light mode switching

Available Themes (ASP.NET MVC 5)

Theme	Light CSS	Dark CSS	Use Case
Bootstrap 5	bootstrap5.css	bootstrap5-dark.css	Modern Bootstrap v5 designs
Bootstrap 4	bootstrap4.css	(none)	Legacy Bootstrap v4 apps
Material	material.css	material-dark.css	Google Material Design
Tailwind	tailwind.css	tailwind-dark.css	Utility-first, modern UX
Fluent	fluent.css	fluent-dark.css	Microsoft Fluent Design System
Fabric	fabric.css	fabric-dark.css	Microsoft Office Fabric (legacy)
High Contrast	highcontrast.css	(none)	Accessibility, vision impairment

Theme Delivery Methods (in order of performance)

1. CDN (Easiest, Recommended for most apps)

Pros: No build setup, always current, fast delivery
Cons: External dependency, version management required
Location: Reference in ~/Views/Shared/_Layout.cshtml head
Version: Must match Syncfusion.EJ2.MVC5 package version

2. Custom Resource Generator (CRG) (Best for production)

Pros: Optimized bundle, only used components, best performance
Cons: Requires setup, extra build step
Use: https://crg.syncfusion.com/ (web tool)
Output: Minimal CSS/JS for selected controls

3. NPM Packages (For advanced customization)

Pros: Full SCSS source, can customize variables
Cons: Requires build pipeline (Gulp, npm), more complex
Method: Install @syncfusion/ej2-* via npm, use Gulp to copy to Content folder
Result: Full control over theming via SCSS

4. Local Files (Legacy, not recommended)

Pros: Complete control, offline access
Cons: Manual updates, version management, maintenance burden
Use: Only for air-gapped or specialized environments

Size Modes & Responsiveness

Touch Mode (`.e-bigger`)

Purpose: Larger controls, better for touch devices, accessibility
Implementation: Add .e-bigger CSS class to container
Options:
- Application-wide: Add class to <body>
- Control-specific: Add class to div wrapping control
- Runtime toggle: Add/remove class via JavaScript

Responsive Design

Sidebar auto-close on small screens
DataGrid responsive columns
Dashboard Layout adaptive mode
Toolbar overflow mode
Tab responsive modes

Quick Checklist

✓ Choose theme based on design requirements (Bootstrap, Material, Tailwind, Fluent, etc.)
✓ Select delivery method: CDN (easiest), CRG (optimized), NPM (customizable), or local
✓ Add theme CSS to _Layout.cshtml head; ensure version matches NuGet package
✓ Add theme CSS for dark variant if needed (e.g., material-dark.css)
✓ Add .e-bigger class if touch mode/accessibility required
✓ Test theme in multiple browsers (Chrome, Firefox, Edge, Safari)
✓ For dynamic switching: Add id to CSS link; update href on theme change
✓ For customization: Use Theme Studio or SCSS overrides; document customizations
✓ Icons: Use Syncfusion's built-in icon classes or integrate FontAwesome/Bootstrap Icons

Icon Integration

Syncfusion Built-in Icons

Included in all themes, no additional setup
Classes: e-icon-* (e.g., e-icons e-icon-edit)
CDN or embedded in theme CSS

Third-party Icons (Bootstrap Icons, FontAwesome)

Install via NuGet or npm
Reference CSS in _Layout.cshtml
Use icon classes in control properties or HTML

Custom Icons

Convert SVG to icon font or base64 data URIs
Define CSS classes mapping to icons
Apply to controls via icon properties

References

Theme & CDN reference setup: references/theme-appearance.md