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.

Themes in Syncfusion React Components Syncfusion React 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 React applications. Table of Contents [Documentation and Navigation Guide]( documentation and navigation guide) [Quick Start]( quick start) [Common Patterns]( common patterns) Documentation and Navigation Guide Built in Themes 📄 Read: [references/built in themes.md](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 Migrating Styles from Component Packages to Theme Packages 📄 Read: [references/migration styles.md](references/migration styles.md) Migrate from component packages to theme packages SCSS & CSS Reference migration to theme packages Automatic dependency inclusion via index files Dark Mode Implementation 📄 Read: [references/dark mode.md](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](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 JavaScript Theme specific variable formats (RGB vs hex values) Icon Library 📄 Read: [references/icons.md](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](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](references/advanced theming.md) Styled components integration Font customization across all components Theme Studio for custom theme creation Quick Start Install and Apply a Theme Step 1: Install Syncfusion React Package and theme package Step 2: Import Theme CSS Option 1: Import from npm theme packages (Recommended) 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: Then use the matching CDN version: 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 Pattern 2: Customize Primary Color with CSS Variables For Fluent 2 Theme: For Material 3 Theme (uses RGB values): Pattern 3: Enable Touch Mode Globally Or per component: Pattern 4: Use Optimized CSS for Faster Loading Pattern 5: Use Icons from Syncfusion Library Install icons package: You can install either the icons package or the theme package: Import icon styles: Use icons in components:

syncfusion-react-themes