Use this skill when users need to apply themes, customize appearance, switch dark mode, use CSS variables, configure icons, or modify visual styling for Syncfusion Angular components. Covers icon library, size modes, and Theme Studio integration.
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.
📄 Read: references/built-in-themes.md
📄 Read: references/dark-mode.md
e-dark-mode class📄 Read: references/css-variables.md
📄 Read: references/icons.md
e-icons class📄 Read: references/advanced-theming.md
📄 Read: references/advanced-theming.md
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.
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');
}
}
}
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 */
}
<!-- index.html -->
<body class="e-bigger">
<app-root></app-root>
</body>
Or per-component:
<ejs-button cssClass="e-bigger">Touch-Friendly Button</ejs-button>
/* src/styles.css - Lite version without bigger mode styles */
@import "@syncfusion/ej2/tailwind3-lite.css";
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>