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 React components. Covers icon library, size modes, and Theme Studio integration.
npx skill4agent add syncfusion/react-ui-components-skills syncfusion-react-themese-dark-modee-iconsnpm install @syncfusion/ej2-react-buttons --save/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";<!-- index.html -->
<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet"/>import React, { useState } from 'react';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
const [isDarkMode, setIsDarkMode] = useState(false);
const handleDarkModeToggle = (event) => {
const checked = event.checked ?? false;
setIsDarkMode(checked);
if (checked) {
document.body.classList.add('e-dark-mode');
} else {
document.body.classList.remove('e-dark-mode');
}
};
return (
<div>
<CheckBoxComponent
label="Enable Dark Mode"
checked={isDarkMode}
change={handleDarkModeToggle}
/>
<ButtonComponent cssClass="e-primary">Sample Button</ButtonComponent>
</div>
);
}
export default App;/* src/App.css */
:root {
--color-sf-primary: #ff6b35; /* Custom orange */
}/* src/App.css */
:root {
--color-sf-primary: 255, 107, 53; /* RGB: Custom orange */
}<!-- index.html -->
<body class="e-bigger">
<div id="root"></div>
</body><ButtonComponent cssClass="e-bigger">Touch-Friendly Button</ButtonComponent>/* src/App.css - Lite version without bigger mode styles */
@import "@syncfusion/ej2/tailwind3-lite.css";npm install @syncfusion/ej2-icons/* src/App.css */
@import "../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css";<span className="e-icons e-cut"></span>
<span className="e-icons e-medium e-copy"></span>
<span className="e-icons e-large e-paste"></span>