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
1---2name: syncfusion-aspnetmvc-theme3description: **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.4---56# Syncfusion ASP.NET MVC — Theming & Appearance78High-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.910## When to Use11- Choosing or applying a theme (Bootstrap, Material, Tailwind, Fluent, Fabric, High Contrast, etc.)12- Customizing themes via Theme Studio or SCSS overrides13- Implementing dynamic theme switching at runtime14- Enabling touch mode (`.e-bigger`) for accessibility and mobile responsiveness15- Customizing component sizes, colors, fonts, or other visual properties16- Integrating Syncfusion icons or custom icon sets17- Supporting dark mode/light mode switching1819## Available Themes (ASP.NET MVC 5)20| Theme | Light CSS | Dark CSS | Use Case |21|-------|-----------|----------|----------|22| **Bootstrap 5** | bootstrap5.css | bootstrap5-dark.css | Modern Bootstrap v5 designs |23| **Bootstrap 4** | bootstrap4.css | (none) | Legacy Bootstrap v4 apps |24| **Material** | material.css | material-dark.css | Google Material Design |25| **Tailwind** | tailwind.css | tailwind-dark.css | Utility-first, modern UX |26| **Fluent** | fluent.css | fluent-dark.css | Microsoft Fluent Design System |27| **Fabric** | fabric.css | fabric-dark.css | Microsoft Office Fabric (legacy) |28| **High Contrast** | highcontrast.css | (none) | Accessibility, vision impairment |2930## Theme Delivery Methods (in order of performance)3132### 1. CDN (Easiest, Recommended for most apps)33- **Pros**: No build setup, always current, fast delivery34- **Cons**: External dependency, version management required35- **Location**: Reference in `~/Views/Shared/_Layout.cshtml` head36- **Version**: Must match Syncfusion.EJ2.MVC5 package version3738### 2. Custom Resource Generator (CRG) (Best for production)39- **Pros**: Optimized bundle, only used components, best performance40- **Cons**: Requires setup, extra build step41- **Use**: https://crg.syncfusion.com/ (web tool)42- **Output**: Minimal CSS/JS for selected controls4344### 3. NPM Packages (For advanced customization)45- **Pros**: Full SCSS source, can customize variables46- **Cons**: Requires build pipeline (Gulp, npm), more complex47- **Method**: Install `@syncfusion/ej2-*` via npm, use Gulp to copy to Content folder48- **Result**: Full control over theming via SCSS4950### 4. Local Files (Legacy, not recommended)51- **Pros**: Complete control, offline access52- **Cons**: Manual updates, version management, maintenance burden53- **Use**: Only for air-gapped or specialized environments5455## Size Modes & Responsiveness5657### Touch Mode (`.e-bigger`)58- **Purpose**: Larger controls, better for touch devices, accessibility59- **Implementation**: Add `.e-bigger` CSS class to container60- **Options**:61 - Application-wide: Add class to `<body>`62 - Control-specific: Add class to div wrapping control63 - Runtime toggle: Add/remove class via JavaScript6465### Responsive Design66- Sidebar auto-close on small screens67- DataGrid responsive columns68- Dashboard Layout adaptive mode69- Toolbar overflow mode70- Tab responsive modes7172## Quick Checklist73✓ Choose theme based on design requirements (Bootstrap, Material, Tailwind, Fluent, etc.) 74✓ Select delivery method: CDN (easiest), CRG (optimized), NPM (customizable), or local 75✓ Add theme CSS to `_Layout.cshtml` head; ensure version matches NuGet package 76✓ Add theme CSS for dark variant if needed (e.g., material-dark.css) 77✓ Add `.e-bigger` class if touch mode/accessibility required 78✓ Test theme in multiple browsers (Chrome, Firefox, Edge, Safari) 79✓ For dynamic switching: Add `id` to CSS link; update `href` on theme change 80✓ For customization: Use Theme Studio or SCSS overrides; document customizations 81✓ Icons: Use Syncfusion's built-in icon classes or integrate FontAwesome/Bootstrap Icons 8283## Icon Integration8485### Syncfusion Built-in Icons86- Included in all themes, no additional setup87- Classes: `e-icon-*` (e.g., `e-icons e-icon-edit`)88- CDN or embedded in theme CSS8990### Third-party Icons (Bootstrap Icons, FontAwesome)91- Install via NuGet or npm92- Reference CSS in _Layout.cshtml93- Use icon classes in control properties or HTML9495### Custom Icons96- Convert SVG to icon font or base64 data URIs97- Define CSS classes mapping to icons98- Apply to controls via icon properties99100## References101- Theme & CDN reference setup: [references/theme-appearance.md](references/theme-appearance.md)
syncfusion