Syncfusion Angular Themes

Name: Syncfusion Angular Themes
Author: syncfusion

syncfusion/angular-ui-components-skills

214 installs
Updated August 4, 2026
syncfusion/angular-ui-components-skills

Use syncfusion-angular-themes for development tasks

About

syncfusion-angular-themes: A skill for development. This provides functionality for development workflows.

syncfusion-angular-themes

Syncfusion Angular Themes by the numbers

214 all-time installs (skills.sh)
+11 installs in the week ending Aug 5, 2026 (Skillselion tracking)
Ranked #1,879 of 4,347 Backend & APIs skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

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

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/syncfusion/angular-ui-components-skills/syncfusion-angular-themes.svg)](https://skillselion.com/skills/syncfusion/angular-ui-components-skills/syncfusion-angular-themes)

Installs	214
Last updated	August 4, 2026
Repository	syncfusion/angular-ui-components-skills ↗

What it does

Use syncfusion-angular-themes for development tasks

Files

SKILL.mdMarkdownGitHub ↗

Themes in Syncfusion Angular Components

Syncfusion Angular components provide comprehensive theming support with modern, customizable themes. This skill guides you through applying themes, customizing appearance, implementing dark mode, using CSS variables, managing icons, and creating custom themes for consistent, professional Angular applications.

Documentation and Navigation Guide
Quick Start
Common Patterns

Documentation and Navigation Guide

Built-in Themes

📄 Read: references/built-in-themes.md

Available 10+ themes
Applying themes via npm packages, CDN, or individual component styles
Optimized (lite) CSS files for reduced bundle size

Dark Mode Implementation

📄 Read: references/dark-mode.md

Global dark mode with e-dark-mode class
Per-component dark mode
Runtime theme switching with checkboxes or toggle buttons

CSS Variables Customization

📄 Read: references/css-variables.md

CSS variable structure for each theme (Material 3, Fluent 2, Bootstrap 5.3, Tailwind 3.4)
Customizing primary, success, warning, danger, info colors
Runtime color modification with TypeScript
Theme-specific variable formats (RGB vs hex values)

Icon Library

📄 Read: references/icons.md

Setting up the icon library (npm or CDN)
Using icons with e-icons class
Icon sizing (small, medium, large)
Customizing icon color and appearance
Available icon sets per theme

Size Modes

📄 Read: references/advanced-theming.md

Normal vs touch (bigger) size modes
Enabling size modes globally or per-component
Runtime size mode switching

Advanced Features

📄 Read: references/advanced-theming.md

Component styling integration
Theme Studio for custom theme creation

Quick Start

Install and Apply a Theme

Step 1: Install Syncfusion Angular Package

npm install @syncfusion/ej2-angular-buttons@latest --save

Step 2: Import Theme CSS

Option 1: Import from npm (Recommended)

/* src/styles.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";

Option 2: Use CDN

To find your installed version:

npm list @syncfusion/ej2-angular-buttons

Then use the matching CDN version:

<!-- angular.json - Add to styles array -->
"styles": [
  "https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css"
]

⚠️ Important: The CDN version MUST match your installed npm package version to avoid style and rendering issues.

Note: Using npm imports (Option 1) is recommended as it automatically keeps CSS and JavaScript versions in sync.

Common Patterns

Pattern 1: Apply Dark Mode Globally

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <ejs-checkbox 
        label="Enable Dark Mode" 
        [checked]="isDarkMode" 
        (change)="handleDarkModeToggle($event)">
      </ejs-checkbox>
      <ejs-button cssClass="e-primary">Sample Button</ejs-button>
    </div>
  `
})
export class AppComponent {
  isDarkMode = false;

  handleDarkModeToggle(event: any): void {
    this.isDarkMode = event.checked ?? false;
    
    if (this.isDarkMode) {
      document.body.classList.add('e-dark-mode');
    } else {
      document.body.classList.remove('e-dark-mode');
    }
  }
}

Pattern 2: Customize Primary Color with CSS Variables

For Fluent 2 Theme:

/* src/styles.css */
:root {
  --color-sf-primary: #ff6b35;  /* Custom orange */
}

For Material 3 Theme (uses RGB values):

/* src/styles.css */
:root {
  --color-sf-primary: 255, 107, 53;  /* RGB: Custom orange */
}

Pattern 3: Enable Touch Mode Globally

<!-- index.html -->
<body class="e-bigger">
  <app-root></app-root>
</body>

Or per-component:

<ejs-button cssClass="e-bigger">Touch-Friendly Button</ejs-button>

Pattern 4: Use Optimized CSS for Faster Loading

/* src/styles.css - Lite version without bigger mode styles */
@import "@syncfusion/ej2/tailwind3-lite.css";

Pattern 5: Use Icons from Syncfusion Library

Install icons package:

npm install @syncfusion/ej2-icons/@latest

Import icon styles:

/* src/styles.css */
@import "../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css";

Use icons in components:

<span class="e-icons e-cut"></span>
<span class="e-icons e-medium e-copy"></span>
<span class="e-icons e-large e-paste"></span>

Size Modes (Touch Support)

Syncfusion Angular components provide two size modes to optimize UX across different devices and input methods:

Normal mode (default): Standard control sizes optimized for mouse/keyboard input
Touch mode (bigger): Enlarged controls with increased spacing for touch/mobile devices

Global Size Mode

Enable touch mode for the entire application by adding the e-bigger class to <body>:

<!-- index.html -->
<body class="e-bigger">
  <app-root></app-root>
</body>

Effect: All Syncfusion components increase in size with larger tap targets (44x44px minimum).

Component-Specific Size Mode

Apply touch mode to individual components:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <!-- Regular size button -->
      <ejs-button>Normal Button</ejs-button>
      
      <!-- Touch-optimized button via container class -->
      <div class="e-bigger">
        <ejs-button>Touch Button</ejs-button>
      </div>
      
      <!-- Touch-optimized grid via cssClass prop -->
      <ejs-grid cssClass="e-bigger" [dataSource]="data"></ejs-grid>
    </div>
  `
})
export class AppComponent {
  data = [
    { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 }
  ];
}

Runtime Size Mode Switching

Toggle size mode dynamically based on user preference or device detection:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h3>Size Mode: {{ isTouchMode ? 'Touch' : 'Normal' }}</h3>
      <ejs-button (click)="toggleSizeMode()">
        Toggle Size Mode
      </ejs-button>
      
      <div style="margin-top: 20px">
        <ejs-button isPrimary="true">Sample Button</ejs-button>
      </div>
    </div>
  `
})
export class AppComponent implements OnInit {
  isTouchMode = false;

  ngOnInit(): void {
    // Auto-detect touch device on mount
    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    this.isTouchMode = isTouchDevice;
    this.applySizeMode();
  }

  toggleSizeMode(): void {
    this.isTouchMode = !this.isTouchMode;
    this.applySizeMode();
  }

  private applySizeMode(): void {
    if (this.isTouchMode) {
      document.body.classList.add('e-bigger');
    } else {
      document.body.classList.remove('e-bigger');
    }
  }
}

Component-Specific Styling

Button Customization

/* src/styles.css */
.e-btn {
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.e-btn.e-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.e-btn.e-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

Custom Component Classes

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ejs-button cssClass="custom-success-btn">Success</ejs-button>
    <ejs-button cssClass="custom-warning-btn">Warning</ejs-button>
    <ejs-button cssClass="custom-error-btn">Error</ejs-button>
  `,
  styles: [`
    .custom-success-btn.e-btn {
      background: #4caf50;
      color: white;
    }
    
    .custom-warning-btn.e-btn {
      background: #ff9800;
      color: white;
    }
    
    .custom-error-btn.e-btn {
      background: #f44336;
      color: white;
    }
    
    .custom-success-btn.e-btn:hover,
    .custom-warning-btn.e-btn:hover,
    .custom-error-btn.e-btn:hover {
      opacity: 0.9;
      transform: translateY(-2px);
    }
  `]
})
export class AppComponent { }

ViewEncapsulation for Component Styling

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ejs-button cssClass="gradient-btn">Gradient Button</ejs-button>
  `,
  styles: [`
    .gradient-btn.e-btn {
      background: linear-gradient(135deg, #75e1ef 0%, #5ccde0 100%);
      color: #000000;
      border: none;
      border-radius: 20px;
      padding: 12px 24px;
      font-weight: 600;
      transition: all 0.3s ease;
    }
    
    .gradient-btn.e-btn:hover {
      background: linear-gradient(135deg, #5ccde0 0%, #4ab8c9 100%);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(117, 225, 239, 0.4);
    }
  `],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent { }

⚠️ Important: Always target Syncfusion component root classes (e.g., .e-btn, .e-input, .e-grid) for proper style application.

Theme Studio Customization

Accessing Theme Studio

Visit https://ej2.syncfusion.com/themestudio/?theme=tailwind3

Available themes:

Material 3: ?theme=material3
Fluent 2: ?theme=fluent2
Bootstrap 5.3: ?theme=bootstrap5.3
Tailwind 3.4: ?theme=tailwind3

Customizing Theme Colors

Theme Studio exposes common theme variables for customization:

1. Select base theme (Material 3, Fluent 2, Bootstrap 5.3, Tailwind 3.4) 2. Pick colors using color pickers for primary, secondary, success, warning, error 3. Preview changes in real-time across multiple components 4. Filter components to generate CSS for specific components only (reduces bundle size) 5. Download theme as ZIP containing CSS, SCSS, and settings.json

Using Downloaded Theme

// Option 1: Import in styles.css
// @import './custom-theme/custom-material3.css';

// Option 2: Add to angular.json
{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "src/custom-theme/custom-material3.css"
            ]
          }
        }
      }
    }
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ejs-button isPrimary="true">Custom Theme Button</ejs-button>
  `
})
export class AppComponent { }

Re-importing Settings

To modify an existing custom theme:

1. Click Import icon in Theme Studio 2. Upload previously downloaded settings.json 3. Modify colors as needed 4. Download updated theme

Use case: Update brand colors across application without recreating theme from scratch.

Filtering Components

Reduce CSS bundle size by including only used components:

1. Click Filter icon in Theme Studio 2. Select components (e.g., Button, Grid, Dropdown) 3. Click Apply 4. Download filtered theme (smaller CSS file)

Example: If app only uses Button, Grid, and Calendar, filter to those components instead of downloading full theme CSS (~300KB+ reduction).

Built-in Themes

Available Themes
Applying Themes via npm
Applying Themes via CDN
Individual Component Themes
Optimized (Lite) CSS Files

Available Themes

Syncfusion Angular components provide multiple modern themes with light and dark variants:

Theme	Light CSS	Dark CSS	Design System
Tailwind 3.4	tailwind3.css	tailwind3-dark.css	Utility-first CSS framework v3.4
Bootstrap 5.3	bootstrap5.3.css	bootstrap5.3-dark.css	Bootstrap framework v5.3
Fluent 2	fluent2.css	fluent2-dark.css	Microsoft Fluent Design v2
Material 3	material3.css	material3-dark.css	Google Material Design v3
Bootstrap 5	bootstrap5.css	bootstrap5-dark.css	Bootstrap framework v5.0
Bootstrap 4	bootstrap4.css	-	Bootstrap framework v4.0
Bootstrap 3	bootstrap.css	bootstrap-dark.css	Bootstrap framework v3.0
Material	material.css	material-dark.css	Google Material Design v1
Tailwind CSS	tailwind.css	tailwind-dark.css	Earlier Tailwind version
Fluent	fluent.css	fluent-dark.css	Microsoft Fluent Design v1
Microsoft Office Fabric	fabric.css	fabric-dark.css	Office UI Fabric
High Contrast	highcontrast.css	-	High contrast for accessibility

Each theme provides:

Light and dark variants
CSS variable support for customization
Responsive design patterns
Accessibility compliance (WCAG 2.1)
Consistent visual language across all components

Applying Themes via npm

Themes are shipped as both combined and individual CSS/SCSS files.

All Components (Combined)

Step 1: Install the ej2 package

npm install @syncfusion/ej2

Step 2: Import theme CSS

/* src/styles.css */
@import "./node_modules/@syncfusion/ej2/tailwind3.css";

Or import SCSS for variable access:

/* src/styles.scss */
@import "./node_modules/@syncfusion/ej2/tailwind3.scss";

Available combined themes:

@syncfusion/ej2/tailwind3.css
@syncfusion/ej2/tailwind3-dark.css
@syncfusion/ej2/bootstrap5.3.css
@syncfusion/ej2/bootstrap5.3-dark.css
@syncfusion/ej2/fluent2.css
@syncfusion/ej2/fluent2-dark.css
@syncfusion/ej2/material3.css
@syncfusion/ej2/material3-dark.css

Applying Themes via CDN

Before using CDN links, check your installed package version:

npm list @syncfusion/ej2-angular-grids

Usage in angular.json

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css"
            ]
          }
        }
      }
    }
  }
}

Usage in index.html

<!-- index.html -->
<head>
  <link href="https://cdn.syncfusion.com/ej2/{version}/{theme_name}.css" rel="stylesheet"/>
</head>

⚠️ Important: The CDN version MUST match your installed npm package version to avoid style and rendering issues.

Available CDN Links

Replace {VERSION} with your installed version (e.g., 27.2.2, 28.1.33, 33.1.44):

Theme	CDN Link Pattern
Tailwind 3.4	https://cdn.syncfusion.com/ej2/{VERSION}/tailwind3.css
Tailwind 3.4 Dark	https://cdn.syncfusion.com/ej2/{VERSION}/tailwind3-dark.css
Bootstrap 5.3	https://cdn.syncfusion.com/ej2/{VERSION}/bootstrap5.3.css
Bootstrap 5.3 Dark	https://cdn.syncfusion.com/ej2/{VERSION}/bootstrap5.3-dark.css
Fluent 2	https://cdn.syncfusion.com/ej2/{VERSION}/fluent2.css
Fluent 2 Dark	https://cdn.syncfusion.com/ej2/{VERSION}/fluent2-dark.css
Material 3	https://cdn.syncfusion.com/ej2/{VERSION}/material3.css
Material 3 Dark	https://cdn.syncfusion.com/ej2/{VERSION}/material3-dark.css

Example: If your package version is 33.1.44:

<link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet"/>

Individual Component Themes

For smallest bundle size, import only the component themes you need.

From Individual Packages (Recommended)

/* Import base styles first (required) */
@import "~@syncfusion/ej2-base/styles/tailwind3.css";

/* Import specific component styles */
@import "~@syncfusion/ej2-angular-buttons/styles/tailwind3.css";
@import "~@syncfusion/ej2-angular-grids/styles/tailwind3.css";

From @syncfusion/ej2 Package

/* Import base styles first (required) */
@import "~@syncfusion/ej2/base/tailwind3.css";

/* Import specific component styles */
@import "~@syncfusion/ej2/button/tailwind3.css";
@import "~@syncfusion/ej2/grid/tailwind3.css";

Dependency Order

Some components require styles from dependent components. Example for Grid:

@import "~@syncfusion/ej2-base/styles/tailwind3.css";           /* Required base */
@import "~@syncfusion/ej2-buttons/styles/tailwind3.css";        /* Grid uses buttons */
@import "~@syncfusion/ej2-inputs/styles/tailwind3.css";         /* Grid uses inputs */
@import "~@syncfusion/ej2-calendars/styles/tailwind3.css";      /* Grid date filtering */
@import "~@syncfusion/ej2-dropdowns/styles/tailwind3.css";      /* Grid filtering */
@import "~@syncfusion/ej2-navigations/styles/tailwind3.css";    /* Grid pager */
@import "~@syncfusion/ej2-popups/styles/tailwind3.css";         /* Grid dialogs */
@import "~@syncfusion/ej2-angular-grids/styles/tailwind3.css";  /* Grid itself */

Refer to each component's documentation for its specific dependencies.

Optimized (Lite) CSS Files

Syncfusion provides optimized (lite) theme variants that exclude "bigger" size mode styles, reducing file size by approximately 25%.

File Size Comparison

Theme	Default Size	Lite Size	Reduction
Fluent 2	3.97 MB	2.96 MB	~25%
Tailwind 3.4	3.85 MB	2.88 MB	~25%
Material 3	3.92 MB	2.94 MB	~25%

Using Lite Versions

All components (combined):

/* src/styles.css */
@import "@syncfusion/ej2/tailwind3-lite.css";

Or SCSS:

/* src/styles.scss */
@import "@syncfusion/ej2/tailwind3-lite.scss";

Individual components:

@import "@syncfusion/ej2-buttons/styles/tailwind3-lite.css";

CDN:

<!-- Replace {VERSION} with your installed package version -->
<link href="https://cdn.syncfusion.com/ej2/{VERSION}/tailwind3-lite.css" rel="stylesheet"/>

<!-- Example: If your version is 33.1.44 -->
<link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3-lite.css" rel="stylesheet"/>

Note: Check your installed version with npm list @syncfusion/ej2-angular-buttons before using CDN links.

CSS Variables for Theme Customization

Overview
CSS Variable Structure
Accessing Theme Variables
Color Customization

Overview

Syncfusion Angular themes leverage CSS variables (custom properties) for dynamic color customization. CSS variables enable reusable values across stylesheets and support runtime modifications via TypeScript for interactive or context-aware styling.

Key advantages:

Dynamic runtime color changes without rebuilding
Consistent styling across all components
Easy theme customization without modifying theme files
Support for user preference-based color schemes

Supported themes:

Material 3 (RGB format)
Fluent 2 (Hex format)
Bootstrap 5.3 (Hex format)
Tailwind 3.4 (Hex format)

CSS Variable Structure

Material 3 Theme (RGB Format)

Material 3 uses RGB values (comma-separated, no rgb() wrapper):

:root {
  --color-sf-primary: 98, 0, 238;           /* Primary brand color */
  --color-sf-on-primary: 255, 255, 255;     /* Text on primary */
  --color-sf-surface: 255, 251, 255;        /* Background */
}

.e-dark-mode {
  --color-sf-primary: 208, 188, 255;
  --color-sf-surface: 28, 27, 31;
}

⚠️ Important: Material 3 requires RGB format. Using hex values will produce inconsistent results.

Fluent 2 / Bootstrap 5.3 / Tailwind 3.4 (Hex Format)

These themes use standard hex color values:

/* Fluent 2 */
:root {
  --color-sf-primary: #0078d4;
  --color-sf-neutral-background1: #ffffff;
}

/* Bootstrap 5.3 */
:root {
  --bs-primary: #0d6efd;
  --bs-body-bg: #ffffff;
}

/* Tailwind 3.4 */
:root {
  --tw-primary: #3b82f6;
}

Accessing Theme Variables

In CSS Files

Use the var() function to reference CSS variables:

.custom-button {
  /* Material 3 - RGB format requires rgb() wrapper */
  background-color: rgb(var(--color-sf-primary));
  color: rgb(var(--color-sf-on-primary));
  border: 1px solid rgb(var(--color-sf-primary));
}

.custom-card {
  /* Fluent 2/Bootstrap/Tailwind - direct hex usage */
  background-color: var(--color-sf-neutral-background1);
  border-color: var(--color-sf-stroke-accessible);
  color: var(--color-sf-neutral-foreground1);
}

.custom-alert {
  /* Bootstrap 5.3 - Using semantic color variables */
  background-color: var(--bs-warning);
  color: var(--bs-dark);
  border: 1px solid var(--bs-warning);
}

.custom-badge {
  /* Tailwind 3.4 - Using utility colors */
  background-color: var(--tw-primary);
  color: var(--tw-gray-50);
}

Color Customization

Material 3 (RGB Format)

/* src/styles.css */
.custom-theme {
  --color-sf-primary: 255, 87, 34;          /* Deep Orange RGB */
  --color-sf-on-primary: 255, 255, 255;
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div class="custom-theme">
      <ejs-button isPrimary="true">Custom Primary</ejs-button>
    </div>
  `,
  styles: [`
    @import '@syncfusion/ej2-angular-buttons/styles/material3.css';
  `]
})
export class AppComponent { }

Fluent 2 (Hex Format)

/* src/styles.css */
.custom-fluent {
  --color-sf-primary: #0078d4;
  --color-sf-primary-hover: #106ebe;
  --color-sf-primary-active: #005a9e;
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div class="custom-fluent">
      <ejs-button isPrimary="true">Custom Primary</ejs-button>
    </div>
  `,
  styles: [`
    @import '@syncfusion/ej2-angular-buttons/styles/fluent2.css';
  `]
})
export class AppComponent { }

Bootstrap 5.3 (Hex Format)

.custom-bootstrap {
  --bs-primary: #6f42c1;
  --bs-primary-rgb: 111, 66, 193;
}

Tailwind 3.4 (Hex Format)

.custom-tailwind {
  --tw-primary: #8b5cf6;
  --tw-primary-dark: #7c3aed;
}

Runtime Color Modification with TypeScript

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <input type="color" (change)="changePrimaryColor($event)" value="#6200ee" />
      <ejs-button isPrimary="true">Dynamic Color Button</ejs-button>
    </div>
  `
})
export class AppComponent {
  changePrimaryColor(event: Event): void {
    const color = (event.target as HTMLInputElement).value;
    
    // Convert hex to RGB for Material 3
    const rgb = this.hexToRgb(color);
    
    // Set CSS variable
    document.documentElement.style.setProperty(
      '--color-sf-primary', 
      `${rgb.r}, ${rgb.g}, ${rgb.b}`
    );
  }

  private hexToRgb(hex: string): { r: number; g: number; b: number } {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : { r: 0, g: 0, b: 0 };
  }
}

Dark Mode Implementation

Overview
Global Dark Mode
Per-Component Dark Mode
Runtime Theme Switching

Overview

Syncfusion Angular themes support both light and dark variants. Dark mode is toggled by applying the e-dark-mode CSS class to the <body> element or specific component containers.

Supported themes with dark variants:

Tailwind 3.4 → tailwind3.css (light), tailwind3-dark.css (dark)
Bootstrap 5.3 → bootstrap5.3.css (light), bootstrap5.3-dark.css (dark)
Fluent 2 → fluent2.css (light), fluent2-dark.css (dark)
Material 3 → material3.css (light), material3-dark.css (dark)

How it works:

Import ONE theme CSS file (e.g., tailwind3.css)
Apply e-dark-mode class to switch to dark variant
Remove e-dark-mode class to return to light variant
No need to import separate dark CSS files

Global Dark Mode

Apply dark mode to all Syncfusion components by adding e-dark-mode to the <body> element.

Static Dark Mode

<!-- index.html -->
<body class="e-dark-mode">
  <app-root></app-root>
</body>

Dynamic Dark Mode with State

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <ejs-checkbox 
        label="Enable Dark Mode" 
        [checked]="isDarkMode" 
        (change)="handleDarkModeToggle($event)">
      </ejs-checkbox>
      <ejs-button cssClass="e-primary">Sample Button</ejs-button>
    </div>
  `
})
export class AppComponent {
  isDarkMode = false;

  handleDarkModeToggle(event: any): void {
    this.isDarkMode = event.checked ?? false;
    
    if (this.isDarkMode) {
      document.body.classList.add('e-dark-mode');
    } else {
      document.body.classList.remove('e-dark-mode');
    }
  }
}

Per-Component Dark Mode

Apply dark mode to specific components or sections by adding e-dark-mode to the component's container.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h2>Light Mode Section</h2>
      <div>
        <ejs-button cssClass="e-primary">Light Button</ejs-button>
      </div>
      
      <h2>Dark Mode Section</h2>
      <div class="e-dark-mode">
        <ejs-button cssClass="e-primary">Dark Button</ejs-button>
      </div>
    </div>
  `
})
export class AppComponent { }

Multiple Sections with Different Modes

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <!-- Light mode navigation -->
      <div class="nav-section">
        <ejs-button>Home</ejs-button>
        <ejs-button>About</ejs-button>
      </div>
      
      <!-- Dark mode content area -->
      <div class="e-dark-mode content-section">
        <ejs-grid [dataSource]="data">
          <e-columns>
            <e-column field='OrderID' width='100'></e-column>
            <e-column field='CustomerID' width='100'></e-column>
            <e-column field='Freight' width='100' format='C2'></e-column>
          </e-columns>
        </ejs-grid>
      </div>
    </div>
  `
})
export class AppComponent {
  data = [
    { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
    { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 }
  ];
}

Runtime Theme Switching

With localStorage Persistence

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <ejs-button (click)="toggleDarkMode()">
        Toggle {{ isDarkMode ? 'Light' : 'Dark' }} Mode
      </ejs-button>
    </div>
  `
})
export class AppComponent implements OnInit {
  isDarkMode = false;

  ngOnInit(): void {
    // Initialize from localStorage
    const saved = localStorage.getItem('darkMode');
    this.isDarkMode = saved === 'true';
    this.applyDarkMode();
  }

  toggleDarkMode(): void {
    this.isDarkMode = !this.isDarkMode;
    this.applyDarkMode();
    
    // Save to localStorage
    localStorage.setItem('darkMode', this.isDarkMode.toString());
  }

  private applyDarkMode(): void {
    if (this.isDarkMode) {
      document.body.classList.add('e-dark-mode');
    } else {
      document.body.classList.remove('e-dark-mode');
    }
  }
}

With System Preference Detection

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <p>Current mode: {{ isDarkMode ? 'Dark' : 'Light' }}</p>
      <ejs-button (click)="toggleDarkMode()">
        Override System Preference
      </ejs-button>
    </div>
  `
})
export class AppComponent implements OnInit, OnDestroy {
  isDarkMode = false;
  private mediaQuery!: MediaQueryList;
  private mediaQueryListener!: (e: MediaQueryListEvent) => void;

  ngOnInit(): void {
    // Check system preference
    this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    this.isDarkMode = this.mediaQuery.matches;
    
    // Listen for system preference changes
    this.mediaQueryListener = (e: MediaQueryListEvent) => {
      this.isDarkMode = e.matches;
      this.applyDarkMode();
    };
    
    this.mediaQuery.addEventListener('change', this.mediaQueryListener);
    this.applyDarkMode();
  }

  ngOnDestroy(): void {
    this.mediaQuery.removeEventListener('change', this.mediaQueryListener);
  }

  toggleDarkMode(): void {
    this.isDarkMode = !this.isDarkMode;
    this.applyDarkMode();
  }

  private applyDarkMode(): void {
    if (this.isDarkMode) {
      document.body.classList.add('e-dark-mode');
    } else {
      document.body.classList.remove('e-dark-mode');
    }
  }
}

Icon Library Usage

Installation and Setup
Using Icons
Icon Sizing
Icon Customization
Common Icon Classes
Icons in Syncfusion Components
Available Icons by Theme

Overview

Syncfusion provides a comprehensive icon library with pre-designed, font-based icons embedded in themes. Icons ensure visual consistency across components and are available via npm or CDN.

Installation and Setup

Using npm

Install the icon package:

npm install @syncfusion/ej2-icons@latest

Import icon styles in your CSS file:

/* src/styles.css */
@import "../node_modules/@syncfusion/ej2-icons/styles/material3.css";

Available themes: material3.css, fluent2.css, bootstrap5.css, tailwind3.css, material.css, bootstrap.css, fabric.css, highcontrast.css

Using CDN

Add to angular.json:

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "https://cdn.syncfusion.com/ej2/32.1.44/ej2-icons/styles/material3.css"
            ]
          }
        }
      }
    }
  }
}

Or in index.html: Use the matching CDN version:

<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-icons/styles/material3.css" rel="stylesheet"/>

⚠️ Important: The CDN version MUST match your installed npm package version to avoid style issues.

Using Icons

Basic Icon Usage

Icons require two CSS classes: 1. `e-icons` - Base class providing font styling 2. Icon-specific class - Defines the glyph (e.g., e-paste, e-search, e-edit)

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <!-- Standalone icons -->
      <span class="e-icons e-paste"></span>
      <span class="e-icons e-search"></span>
      <span class="e-icons e-edit"></span>
      
      <!-- Icons in buttons -->
      <ejs-button iconCss="e-icons e-save">Save</ejs-button>
      <ejs-button iconCss="e-icons e-delete">Delete</ejs-button>
    </div>
  `
})
export class AppComponent { }

Custom Icon Font-Size

/* Custom sizing beyond utility classes */
.icon-xl { font-size: 32px; }
.icon-xxl { font-size: 48px; }
.icon-inline { font-size: inherit; }  /* Match parent text size */

<span class="e-icons e-star icon-xl"></span>
<span class="e-icons e-star icon-xxl"></span>
<h2>Heading <span class="e-icons e-info icon-inline"></span></h2>

Icon Sizing

Use utility classes: e-small (8px), e-medium (16px), e-large (24px)

<span class="e-icons e-small e-search"></span>
<span class="e-icons e-medium e-search"></span>
<span class="e-icons e-large e-search"></span>

Responsive Sizing

.icon-responsive { font-size: 16px; }
@media (min-width: 768px) { .icon-responsive { font-size: 20px; } }
@media (min-width: 1024px) { .icon-responsive { font-size: 24px; } }

Icon Customization

Color Customization

.icon-primary { color: #6200ee; }
.icon-success { color: #4caf50; }
.icon-error { color: #f44336; }

<span class="e-icons e-check icon-success"></span>
<span class="e-icons e-close icon-error"></span>

Background and Padding

.icon-badge {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #6200ee;
  color: white;
}

CSS Effects

.icon-hover { transition: all 0.3s ease; cursor: pointer; }
.icon-hover:hover { color: #6200ee; transform: scale(1.2); }

.icon-rotate { animation: rotate 2s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }

.icon-pulse { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

Common Icon Classes

Navigation Icons

e-menu - Hamburger menu
e-close - Close/X button
e-chevron-left, e-chevron-right - Navigation arrows
e-chevron-up, e-chevron-down - Vertical navigation
e-expand, e-collapse - Expand/collapse controls
e-arrow-left, e-arrow-right - Back/forward arrows

Action Icons

e-edit - Edit/pencil
e-delete - Delete/trash
e-save - Save/disk
e-copy, e-paste, e-cut - Clipboard operations
e-search - Search/magnifier
e-filter - Filter/funnel
e-add, e-plus - Add/create new
e-remove, e-minus - Remove/subtract

Status Icons

e-check - Success/checkmark
e-close - Error/X
e-warning - Warning/alert
e-info - Information
e-lock, e-unlock - Security status
e-eye, e-eye-slash - Visibility toggle

File and Media Icons

e-folder, e-folder-open - Folder states
e-file - Generic file
e-upload, e-download - Transfer operations
e-image - Image file
e-video - Video file
e-music - Audio file

UI Controls

e-settings - Settings/gear
e-more-vert, e-more-horiz - More options menu
e-refresh - Refresh/reload
e-calendar - Calendar/date
e-clock - Clock/time
e-bell - Notifications
e-user - User/profile

Usage Examples

<!-- Navigation -->
<button><span class="e-icons e-menu"></span></button>
<button><span class="e-icons e-chevron-left"></span> Back</button>

<!-- Actions -->
<span class="e-icons e-search"></span>
<span class="e-icons e-edit"></span>
<span class="e-icons e-delete"></span>

<!-- Status indicators -->
<span class="e-icons e-check icon-success"></span>
<span class="e-icons e-warning icon-warning"></span>

Icons in Syncfusion Components

Buttons

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ejs-button iconCss="e-icons e-save">Save</ejs-button>
    <ejs-button iconCss="e-icons e-download" iconPosition="Right">Download</ejs-button>
    <ejs-button iconCss="e-icons e-search"></ejs-button>  <!-- Icon only -->
  `
})
export class AppComponent { }

Available Icons by Theme

Each theme includes 200+ icons. View complete icon galleries:

Material 3: https://ej2.syncfusion.com/products/icons/material3/demo.html
Fluent 2: https://ej2.syncfusion.com/products/icons/fluent2/demo.html
Bootstrap 5: https://ej2.syncfusion.com/products/icons/bootstrap5/demo.html
Tailwind 3: https://ej2.syncfusion.com/products/icons/tailwind3/demo.html

All themes share the same icon class names (e.g., e-search works across all themes), but glyph designs vary per theme aesthetic.

Related skills

Lark Openapi ExplorerInstantly explore, test, and generate calls against the full Lark (Feishu) OpenAPI surface without leaving their agent workflow.493k

Lark EventConsume real-time events from Lark/Feishu as structured NDJSON streams inside AI agent workflows.387k16k

Lark Openapi ExplorerWhen an existing Lark/Feishu skill or CLI command cannot fulfill a specific requirement and they need to discover and invoke the exact native OpenAPI endpoint.386k16k

Just ScrapeQuickly search, crawl, extract structured JSON, or monitor web pages without writing custom scraping code.245k41

Lark AppsQuery the current visibility and permission scope of a Lark (Feishu) app without writing HTTP client code.235k16k

Design An InterfaceGenerate multiple radically different interface or API designs in parallel before committing to one.188k198k

Backend & APIsbackendintegrations

About

Syncfusion Angular Themes by the numbers

Add your badge

What it does

Files

Themes in Syncfusion Angular Components

Table of Contents

Documentation and Navigation Guide

Built-in Themes

Dark Mode Implementation

CSS Variables Customization

Icon Library

Size Modes

Advanced Features

Quick Start

Install and Apply a Theme

Common Patterns

Pattern 1: Apply Dark Mode Globally

Pattern 2: Customize Primary Color with CSS Variables

Pattern 3: Enable Touch Mode Globally

Pattern 4: Use Optimized CSS for Faster Loading

Pattern 5: Use Icons from Syncfusion Library

Advanced Theming Features

Table of Contents

Size Modes (Touch Support)

Global Size Mode

Component-Specific Size Mode

Runtime Size Mode Switching

Component-Specific Styling

Button Customization

Custom Component Classes

ViewEncapsulation for Component Styling

Theme Studio Customization

Accessing Theme Studio

Customizing Theme Colors

Using Downloaded Theme

Re-importing Settings

Filtering Components

Built-in Themes

Table of Contents

Available Themes

Applying Themes via npm

All Components (Combined)

Applying Themes via CDN

Usage in angular.json

Usage in index.html

Available CDN Links

Individual Component Themes

From Individual Packages (Recommended)

From @syncfusion/ej2 Package

Dependency Order

Optimized (Lite) CSS Files

File Size Comparison

Using Lite Versions

CSS Variables for Theme Customization

Table of Contents

Overview

CSS Variable Structure

Material 3 Theme (RGB Format)

Fluent 2 / Bootstrap 5.3 / Tailwind 3.4 (Hex Format)

Accessing Theme Variables

In CSS Files

Color Customization

Material 3 (RGB Format)

Fluent 2 (Hex Format)

Bootstrap 5.3 (Hex Format)

Tailwind 3.4 (Hex Format)

Runtime Color Modification with TypeScript

Dark Mode Implementation

Table of Contents

Overview

Global Dark Mode

Static Dark Mode

Dynamic Dark Mode with State

Per-Component Dark Mode

Multiple Sections with Different Modes

Runtime Theme Switching

With localStorage Persistence

With System Preference Detection

Icon Library Usage