Loading...
Loading...
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.
npx skill4agent add syncfusion/angular-ui-components-skills syncfusion-angular-themese-dark-modee-iconsnpm install @syncfusion/ej2-angular-buttons@latest --save/* src/styles.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";<!-- angular.json - Add to styles array -->
"styles": [
"https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css"
]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');
}
}
}/* src/styles.css */
:root {
--color-sf-primary: #ff6b35; /* Custom orange */
}/* src/styles.css */
:root {
--color-sf-primary: 255, 107, 53; /* RGB: Custom orange */
}<!-- index.html -->
<body class="e-bigger">
<app-root></app-root>
</body><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";npm install @syncfusion/ej2-icons/@latest/* src/styles.css */
@import "../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css";<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>