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 JavaScript controls. Covers icon library, size modes, and Theme Studio integration.
Syncfusion JavaScript controls 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 JavaScript 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 JavaScript Package
npm install @syncfusion/ej2-buttons --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
⚠️ Important: The CDN version MUST match your installed npm package version to avoid style and rendering issues.
To find your installed version:
npm list @syncfusion/ej2-buttons
Then use the matching CDN version:
<!-- index.html -->
<!-- Replace {VERSION} with your installed package version (e.g., 28.1.33, 33.1.44) -->
<link href="https://cdn.syncfusion.com/ej2/{VERSION}/tailwind3.css" rel="stylesheet"/>
<!-- Example: If your package version is 33.1.44 -->
<link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet"/>
Note: Using npm imports (Option 1) is recommended as it automatically keeps CSS and JavaScript versions in sync.
import { CheckBox } from '@syncfusion/ej2-buttons';
import { Button } from '@syncfusion/ej2-buttons';
// Initialize dark mode checkbox
const darkModeCheckBox: CheckBox = new CheckBox({
label: 'Enable Dark Mode',
change: (args) => {
const isChecked: boolean = args.checked ?? false;
if (isChecked) {
document.body.classList.add('e-dark-mode');
} else {
document.body.classList.remove('e-dark-mode');
}
}
});
darkModeCheckBox.appendTo('#darkModeCheckbox');
// Initialize sample button
const button: Button = new Button({
cssClass: 'e-primary',
content: 'Sample Button'
});
button.appendTo('#sampleButton');
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">
<div id="app"></div>
</body>
Or per-component:
import { Button } from '@syncfusion/ej2-buttons';
const button: Button = new Button({
cssClass: 'e-bigger',
content: 'Touch-Friendly Button'
});
button.appendTo('#button');
/* src/styles.css - Lite version without bigger mode styles */
@import "@syncfusion/ej2/tailwind3-lite.css";
Install icons package:
npm install @syncfusion/ej2-icons
Import icon styles:
/* src/styles.css */
@import "../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css";
Use icons in HTML:
<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>