Syncfusion React Themes

Name: Syncfusion React Themes
Author: syncfusion

syncfusion/react-ui-components-skills

451 installs
3 repo stars
Updated July 28, 2026
syncfusion/react-ui-components-skills

syncfusion-react-themes is a Syncfusion agent skill that teaches developers to apply 10+ built-in themes, dark mode, CSS variables, icons, and Theme Studio customization to Syncfusion React components.

About

syncfusion-react-themes is version 33.1.44 in syncfusion/react-ui-components-skills, categorized as Theming and Appearance for Syncfusion React apps. It documents npm and CDN theme imports that must match installed @syncfusion package versions, global dark mode via the e-dark-mode body class, per-component cssClass sizing with e-bigger touch mode, and CSS variable overrides for Fluent 2 hex and Material 3 RGB primary colors. Reference guides cover built-in themes, dark mode switching, css-variables.md per theme family, icons via @syncfusion/ej2-icons, advanced theming including Theme Studio, and tailwind3-lite optimized CSS for smaller bundles. Developers invoke it when styling Syncfusion buttons, grids, or schedulers, switching themes at runtime, or aligning CDN CSS version 33.1.44 with local npm packages.

syncfusion-react-themes

Syncfusion React Themes by the numbers

451 all-time installs (skills.sh)
+52 installs in the week ending Aug 5, 2026 (Skillselion tracking)
Ranked #962 of 4,347 Backend & APIs skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-themes

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/syncfusion/react-ui-components-skills/syncfusion-react-themes.svg)](https://skillselion.com/skills/syncfusion/react-ui-components-skills/syncfusion-react-themes)

Installs	451
repo stars	★ 3
Last updated	July 28, 2026
Repository	syncfusion/react-ui-components-skills ↗

How do you apply Syncfusion React themes and dark mode?

Use syncfusion-react-themes for development tasks

Who is it for?

React developers using Syncfusion EJ2 components who need correct theme imports, dark mode, CSS variables, icons, and CDN version alignment.

Skip if: Skip syncfusion-react-themes when the project uses non-Syncfusion UI libraries exclusively or needs only generic Tailwind theming without EJ2 stylesheets.

When should I use this skill?

User asks to theme Syncfusion React components, switch dark mode, import ej2 CSS, customize CSS variables, or configure Syncfusion icons.

What you get

Theme CSS imports, dark-mode toggle code, CSS variable overrides, icon library setup, and touch-mode class configuration for Syncfusion React components.

Theme CSS import configuration
Dark mode toggle handler
Primary color CSS variable overrides

By the numbers

Skill metadata version 33.1.44
Documents 10+ built-in Syncfusion themes
Includes five themed reference guides and five common implementation patterns

Files

SKILL.mdMarkdownGitHub ↗

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.

Documentation and Navigation Guide
Quick Start
Common Patterns

Documentation and Navigation Guide

Built-in Themes

📄 Read: 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

Dark Mode Implementation

📄 Read: 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

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

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

Normal vs touch (bigger) size modes
Enabling size modes globally or per-component
Runtime size mode switching

Advanced Features

📄 Read: 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

npm install @syncfusion/ej2-react-buttons --save

Step 2: Import Theme CSS

Option 1: Import from npm (Recommended)

/* src/App.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-react-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.

Common Patterns

Pattern 1: Apply Dark Mode Globally

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;

Pattern 2: Customize Primary Color with CSS Variables

For Fluent 2 Theme:

/* src/App.css */
:root {
  --color-sf-primary: #ff6b35;  /* Custom orange */
}

For Material 3 Theme (uses RGB values):

/* src/App.css */
:root {
  --color-sf-primary: 255, 107, 53;  /* RGB: Custom orange */
}

Pattern 3: Enable Touch Mode Globally

<!-- index.html -->
<body class="e-bigger">
  <div id="root"></div>
</body>

Or per-component:

<ButtonComponent cssClass="e-bigger">Touch-Friendly Button</ButtonComponent>

Pattern 4: Use Optimized CSS for Faster Loading

/* src/App.css - Lite version without bigger mode styles */
@import "@syncfusion/ej2/tailwind3-lite.css";

Pattern 5: Use Icons from Syncfusion Library

Install icons package:

npm install @syncfusion/ej2-icons

Import icon styles:

/* src/App.css */
@import "../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css";

Use icons in components:

<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>

Size Modes (Touch Support)

Syncfusion React components provide two size modes to optimize UX across different devices and input methods:

Normal mode (default): Standard control sizes optimized for mouse/keyboard input
Touch mode (bigger): Enlarged controls with increased spacing for touch/mobile devices

Global Size Mode

Enable touch mode for the entire application by adding the e-bigger class to <body>:

<!-- index.html -->
<body class="e-bigger">
  <div id="root"></div>
</body>

Effect: All Syncfusion components increase in size with larger tap targets (44x44px minimum).

Component-Specific Size Mode

Apply touch mode to individual components:

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GridComponent } from '@syncfusion/ej2-react-grids';

function App() {
  return (
    <div>
      {/* Regular size button */}
      <ButtonComponent>Normal Button</ButtonComponent>
      
      {/* Touch-optimized button via container class */}
      <div className="e-bigger">
        <ButtonComponent>Touch Button</ButtonComponent>
      </div>
      
      {/* Touch-optimized grid via cssClass prop */}
      <GridComponent cssClass="e-bigger" dataSource={data} />
    </div>
  );
}

Runtime Size Mode Switching

Toggle size mode dynamically based on user preference or device detection:

import { useState, useEffect } from 'react';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  const [isTouchMode, setIsTouchMode] = useState(false);

  // Apply e-bigger class to body
  useEffect(() => {
    if (isTouchMode) {
      document.body.classList.add('e-bigger');
    } else {
      document.body.classList.remove('e-bigger');
    }
  }, [isTouchMode]);

  // Auto-detect touch device on mount
  useEffect(() => {
    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    setIsTouchMode(isTouchDevice);
  }, []);

  return (
    <div>
      <h3>Size Mode: {isTouchMode ? 'Touch' : 'Normal'}</h3>
      <ButtonComponent onClick={() => setIsTouchMode(!isTouchMode)}>
        Toggle Size Mode
      </ButtonComponent>
      
      <div style={{ marginTop: '20px' }}>
        <ButtonComponent isPrimary={true}>Sample Button</ButtonComponent>
      </div>
    </div>
  );
}

Styled-Components Integration

Syncfusion components support styled-components for CSS-in-JS styling.

Basic Styled-Components Usage

Install styled-components from official packages.

Wrap Syncfusion components with styled():

import styled from 'styled-components';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import '@syncfusion/ej2-material3-theme/material3.css';

const StyledButton = styled(ButtonComponent)`
  &.e-btn {
    background: #75e1ef;
    color: #000000;
    border: none;
    border-radius: 20px;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
    
    &:hover {
      background: #5ccde0;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(117, 225, 239, 0.4);
    }
    
    &:active {
      transform: translateY(0);
    }
  }
`;

function App() {
  return (
    <div>
      <StyledButton>Custom Styled Button</StyledButton>
    </div>
  );
}

⚠️ Important: Always target Syncfusion component root classes (e.g., .e-btn, .e-input, .e-grid) for proper style application.

Dynamic Styling with Props

Pass props to styled components for conditional styling:

import styled, { css } from 'styled-components';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

const DynamicButton = styled(ButtonComponent)`
  &.e-btn {
    ${props => props.$variant === 'success' && css`
      background: #4caf50;
      color: white;
    `}
    
    ${props => props.$variant === 'warning' && css`
      background: #ff9800;
      color: white;
    `}
    
    ${props => props.$variant === 'error' && css`
      background: #f44336;
      color: white;
    `}
    
    ${props => props.disabled && css`
      background: #cccccc;
      color: #666666;
      cursor: not-allowed;
    `}
  }
`;

function App() {
  return (
    <div>
      <DynamicButton $variant="success">Success</DynamicButton>
      <DynamicButton $variant="warning">Warning</DynamicButton>
      <DynamicButton $variant="error">Error</DynamicButton>
      <DynamicButton disabled={true}>Disabled</DynamicButton>
    </div>
  );
}

Note: Use transient props ($propName) to prevent props from being passed to the DOM.

Theme-Aware Styling

Integrate with styled-components ThemeProvider:

import { ThemeProvider } from 'styled-components';
import styled from 'styled-components';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

const theme = {
  primary: '#6200ee',
  secondary: '#03dac6',
  error: '#b00020'
};

const ThemedButton = styled(ButtonComponent)`
  &.e-btn {
    background: ${props => props.theme.primary};
    color: white;
    
    &:hover {
      background: ${props => props.theme.secondary};
    }
  }
`;

function App() {
  return (
    <ThemeProvider theme={theme}>
      <ThemedButton>Themed Button</ThemedButton>
    </ThemeProvider>
  );
}

Theme Studio Customization

Accessing Theme Studio

Visit https://ej2.syncfusion.com/themestudio/?theme=tailwind3

Available themes:

Material 3: ?theme=material3
Fluent 2: ?theme=fluent2
Bootstrap 5.3: ?theme=bootstrap5.3
Tailwind 3.4: ?theme=tailwind3

Customizing Theme Colors

Theme Studio exposes common theme variables for customization:

1. Select base theme (Material 3, Fluent 2, Bootstrap 5.3, Tailwind 3.4) 2. Pick colors using color pickers for primary, secondary, success, warning, error 3. Preview changes in real-time across multiple components 4. Filter components to generate CSS for specific components only (reduces bundle size) 5. Download theme as ZIP containing CSS, SCSS, and settings.json

Using Downloaded Theme

// Option 1: Direct CSS import
import './custom-theme/custom-material3.css';

// Option 2: HTML link tag
// <link href="./custom-theme/custom-material3.css" rel="stylesheet" />

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  return <ButtonComponent isPrimary={true}>Custom Theme Button</ButtonComponent>;
}

Re-importing Settings

To modify an existing custom theme:

1. Click Import icon in Theme Studio 2. Upload previously downloaded settings.json 3. Modify colors as needed 4. Download updated theme

Use case: Update brand colors across application without recreating theme from scratch.

Filtering Components

Reduce CSS bundle size by including only used components:

1. Click Filter icon in Theme Studio 2. Select components (e.g., Button, Grid, Dropdown) 3. Click Apply 4. Download filtered theme (smaller CSS file)

Example: If app only uses Button, Grid, and Calendar, filter to those components instead of downloading full theme CSS (~300KB+ reduction).

Component-Specific Styling

Button Customization

/* index.css */
.e-btn {
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.e-btn.e-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.e-btn.e-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

Built-in Themes

Available Themes
Applying Themes via npm
Applying Themes via CDN
Individual Component Themes
Optimized (Lite) CSS Files

Available Themes

Syncfusion React components provide multiple modern themes with light and dark variants:

Theme	Light CSS	Dark CSS	Design System
Tailwind 3.4	tailwind3.css	tailwind3-dark.css	Utility-first CSS framework v3.4
Bootstrap 5.3	bootstrap5.3.css	bootstrap5.3-dark.css	Bootstrap framework v5.3
Fluent 2	fluent2.css	fluent2-dark.css	Microsoft Fluent Design v2
Material 3	material3.css	material3-dark.css	Google Material Design v3
Bootstrap 5	bootstrap5.css	bootstrap5-dark.css	Bootstrap framework v5.0
Bootstrap 4	bootstrap4.css	-	Bootstrap framework v4.0
Bootstrap 3	bootstrap.css	bootstrap-dark.css	Bootstrap framework v3.0
Material	material.css	material-dark.css	Google Material Design v1
Tailwind CSS	tailwind.css	tailwind-dark.css	Earlier Tailwind version
Fluent	fluent.css	fluent-dark.css	Microsoft Fluent Design v1
Microsoft Office Fabric	fabric.css	fabric-dark.css	Office UI Fabric
High Contrast	highcontrast.css	-	High contrast for accessibility

Each theme provides:

Light and dark variants
CSS variable support for customization
Responsive design patterns
Accessibility compliance (WCAG 2.1)
Consistent visual language across all components

Applying Themes via npm

Themes are shipped as both combined and individual CSS/SCSS files.

All Components (Combined)

Step 1: Install the ej2 package

npm install @syncfusion/ej2

Step 2: Import theme CSS

/* src/App.css */
@import "./node_modules/@syncfusion/ej2/tailwind3.css";

Or import SCSS for variable access:

/* src/App.scss */
@import "./node_modules/@syncfusion/ej2/tailwind3.scss";

Available combined themes:

@syncfusion/ej2/tailwind3.css
@syncfusion/ej2/tailwind3-dark.css
@syncfusion/ej2/bootstrap5.3.css
@syncfusion/ej2/bootstrap5.3-dark.css
@syncfusion/ej2/fluent2.css
@syncfusion/ej2/fluent2-dark.css
@syncfusion/ej2/material3.css
@syncfusion/ej2/material3-dark.css

Applying Themes via CDN

⚠️ Important: The CDN version MUST match your installed npm package version to avoid style and rendering issues. Using npm imports is recommended as it automatically keeps CSS and JavaScript versions in sync.

Find Your Installed Version

Before using CDN links, check your installed package version:

npm list @syncfusion/ej2-react-grids

Or check package.json:

{
  "dependencies": {
    "@syncfusion/ej2-react-grids": "33.1.44"  // Your version
  }
}

Usage

<!-- index.html -->
<head>
  <!-- Replace {VERSION} with your installed package version -->
  <link href="https://cdn.syncfusion.com/ej2/{VERSION}/{theme_name}.css" rel="stylesheet"/>
</head>

Available CDN Links

Replace {VERSION} with your installed version (e.g., 27.2.2, 28.1.33, 33.1.44):

Theme	CDN Link Pattern
Tailwind 3.4	https://cdn.syncfusion.com/ej2/{VERSION}/tailwind3.css
Tailwind 3.4 Dark	https://cdn.syncfusion.com/ej2/{VERSION}/tailwind3-dark.css
Bootstrap 5.3	https://cdn.syncfusion.com/ej2/{VERSION}/bootstrap5.3.css
Bootstrap 5.3 Dark	https://cdn.syncfusion.com/ej2/{VERSION}/bootstrap5.3-dark.css
Fluent 2	https://cdn.syncfusion.com/ej2/{VERSION}/fluent2.css
Fluent 2 Dark	https://cdn.syncfusion.com/ej2/{VERSION}/fluent2-dark.css
Material 3	https://cdn.syncfusion.com/ej2/{VERSION}/material3.css
Material 3 Dark	https://cdn.syncfusion.com/ej2/{VERSION}/material3-dark.css

Example: If your package version is 33.1.44:

<link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet"/>

Individual Component Themes

For smallest bundle size, import only the component themes you need.

From Individual Packages (Recommended)

/* Import base styles first (required) */
@import "ej2-base/styles/tailwind3.css";

/* Import specific component styles */
@import "ej2-react-buttons/styles/tailwind3.css";
@import "ej2-react-grids/styles/tailwind3.css";

From @syncfusion/ej2 Package

/* Import base styles first (required) */
@import "ej2/base/tailwind3.css";

/* Import specific component styles */
@import "ej2/button/tailwind3.css";
@import "ej2/grid/tailwind3.css";

Dependency Order

Some components require styles from dependent components. Example for Grid:

@import "ej2-base/styles/tailwind3.css";           /* Required base */
@import "ej2-buttons/styles/tailwind3.css";        /* Grid uses buttons */
@import "ej2-inputs/styles/tailwind3.css";         /* Grid uses inputs */
@import "ej2-calendars/styles/tailwind3.css";      /* Grid date filtering */
@import "ej2-dropdowns/styles/tailwind3.css";      /* Grid filtering */
@import "ej2-navigations/styles/tailwind3.css";    /* Grid pager */
@import "ej2-popups/styles/tailwind3.css";         /* Grid dialogs */
@import "ej2-react-grids/styles/tailwind3.css";    /* Grid itself */

Refer to each component's documentation for its specific dependencies.

Optimized (Lite) CSS Files

Syncfusion provides optimized (lite) theme variants that exclude "bigger" size mode styles, reducing file size by approximately 25%.

File Size Comparison

Theme	Default Size	Lite Size	Reduction
Fluent 2	3.97 MB	2.96 MB	~25%
Tailwind 3.4	3.85 MB	2.88 MB	~25%
Material 3	3.92 MB	2.94 MB	~25%

Using Lite Versions

All components (combined):

/* src/App.css */
@import "@syncfusion/ej2/tailwind3-lite.css";

Or SCSS:

/* src/App.scss */
@import "@syncfusion/ej2/tailwind3-lite.scss";

Individual components:

@import "@syncfusion/ej2-buttons/styles/tailwind3-lite.css";

CDN:

<!-- Replace {VERSION} with your installed package version -->
<link href="https://cdn.syncfusion.com/ej2/{VERSION}/tailwind3-lite.css" rel="stylesheet"/>

<!-- Example: If your version is 33.1.44 -->
<link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3-lite.css" rel="stylesheet"/>

Note: Check your installed version with npm list @syncfusion/ej2-react-buttons before using CDN links.

CSS Variables for Theme Customization

Overview
CSS Variable Structure
Accessing Theme Variables
Color Customization

Overview

Syncfusion React themes leverage CSS variables (custom properties) for dynamic color customization. CSS variables enable reusable values across stylesheets and support runtime modifications via JavaScript for interactive or context-aware styling.

Key advantages:

Dynamic runtime color changes without rebuilding
Consistent styling across all components
Easy theme customization without modifying theme files
Support for user preference-based color schemes

Supported themes:

Material 3 (RGB format)
Fluent 2 (Hex format)
Bootstrap 5.3 (Hex format)
Tailwind 3.4 (Hex format)

CSS Variable Structure

Material 3 Theme (RGB Format)

Material 3 uses RGB values (comma-separated, no rgb() wrapper):

:root {
  --color-sf-primary: 98, 0, 238;           /* Primary brand color */
  --color-sf-on-primary: 255, 255, 255;     /* Text on primary */
  --color-sf-surface: 255, 251, 255;        /* Background */
}

.e-dark-mode {
  --color-sf-primary: 208, 188, 255;
  --color-sf-surface: 28, 27, 31;
}

⚠️ Important: Material 3 requires RGB format. Using hex values will produce inconsistent results.

Fluent 2 / Bootstrap 5.3 / Tailwind 3.4 (Hex Format)

These themes use standard hex color values:

/* Fluent 2 */
:root {
  --color-sf-primary: #0078d4;
  --color-sf-neutral-background1: #ffffff;
}

/* Bootstrap 5.3 */
:root {
  --bs-primary: #0d6efd;
  --bs-body-bg: #ffffff;
}

/* Tailwind 3.4 */
:root {
  --tw-primary: #3b82f6;
}

Accessing Theme Variables

In CSS Files

Use the var() function to reference CSS variables:

.custom-button {
  /* Material 3 - RGB format requires rgb() wrapper */
  background-color: rgb(var(--color-sf-primary));
  color: rgb(var(--color-sf-on-primary));
  border: 1px solid rgb(var(--color-sf-primary));
}

.custom-card {
  /* Fluent 2/Bootstrap/Tailwind - direct hex usage */
  background-color: var(--color-sf-neutral-background1);
  border-color: var(--color-sf-stroke-accessible);
  color: var(--color-sf-neutral-foreground1);
}

.custom-alert {
  /* Bootstrap 5.3 - Using semantic color variables */
  background-color: var(--bs-warning);
  color: var(--bs-dark);
  border: 1px solid var(--bs-warning);
}

.custom-badge {
  /* Tailwind 3.4 - Using utility colors */
  background-color: var(--tw-primary);
  color: var(--tw-gray-50);
}

Color Customization

Material 3 (RGB Format)

/* index.css */
.custom-theme {
  --color-sf-primary: 255, 87, 34;          /* Deep Orange RGB */
  --color-sf-on-primary: 255, 255, 255;
}

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import '@syncfusion/ej2-material3-theme/material3.css';
import './index.css';

function App() {
  return (
    <div className="custom-theme">
      <ButtonComponent isPrimary={true}>Custom Primary</ButtonComponent>
    </div>
  );
}

Fluent 2 (Hex Format)

/* index.css */
.custom-fluent {
  --color-sf-primary: #0078d4;
  --color-sf-primary-hover: #106ebe;
  --color-sf-primary-active: #005a9e;
}

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import '@syncfusion/ej2-fluent2-theme/fluent2.css';
import './index.css';

function App() {
  return (
    <div className="custom-fluent">
      <ButtonComponent isPrimary={true}>Custom Primary</ButtonComponent>
    </div>
  );
}

Bootstrap 5.3 (Hex Format)

.custom-bootstrap {
  --bs-primary: #6f42c1;
  --bs-primary-rgb: 111, 66, 193;
}

Tailwind 3.4 (Hex Format)

.custom-tailwind {
  --tw-primary: #8b5cf6;
  --tw-primary-dark: #7c3aed;
}

Dark Mode Implementation

Overview
Global Dark Mode
Per-Component Dark Mode
Runtime Theme Switching

Overview

Syncfusion React themes support both light and dark variants. Dark mode is toggled by applying the e-dark-mode CSS class to the <body> element or specific component containers.

Supported themes with dark variants:

Tailwind 3.4 → tailwind3.css (light), tailwind3-dark.css (dark)
Bootstrap 5.3 → bootstrap5.3.css (light), bootstrap5.3-dark.css (dark)
Fluent 2 → fluent2.css (light), fluent2-dark.css (dark)
Material 3 → material3.css (light), material3-dark.css (dark)

How it works:

Import ONE theme CSS file (e.g., tailwind3.css)
Apply e-dark-mode class to switch to dark variant
Remove e-dark-mode class to return to light variant
No need to import separate dark CSS files

Global Dark Mode

Apply dark mode to all Syncfusion components by adding e-dark-mode to the <body> element.

Static Dark Mode

<!-- index.html -->
<body class="e-dark-mode">
  <div id="root"></div>
</body>

Dynamic Dark Mode with State

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;

Per-Component Dark Mode

Apply dark mode to specific components or sections by adding e-dark-mode to the component's container.

import React from 'react';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  return (
    <div>
      <h2>Light Mode Section</h2>
      <div>
        <ButtonComponent cssClass="e-primary">Light Button</ButtonComponent>
      </div>
      
      <h2>Dark Mode Section</h2>
      <div className="e-dark-mode">
        <ButtonComponent cssClass="e-primary">Dark Button</ButtonComponent>
      </div>
    </div>
  );
}

export default App;

Multiple Sections with Different Modes

import React from 'react';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';

function App() {
  const data = [
    { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
    { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 }
  ];

  return (
    <div>
      {/* Light mode navigation */}
      <div className="nav-section">
        <ButtonComponent>Home</ButtonComponent>
        <ButtonComponent>About</ButtonComponent>
      </div>
      
      {/* Dark mode content area */}
      <div className="e-dark-mode content-section">
        <GridComponent dataSource={data}>
          <ColumnsDirective>
            <ColumnDirective field='OrderID' width='100' />
            <ColumnDirective field='CustomerID' width='100' />
            <ColumnDirective field='Freight' width='100' format="C2" />
          </ColumnsDirective>
        </GridComponent>
      </div>
    </div>
  );
}

export default App;

Runtime Theme Switching

With localStorage Persistence

import React, { useState, useEffect } from 'react';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  const [isDarkMode, setIsDarkMode] = useState(() => {
    // Initialize from localStorage
    const saved = localStorage.getItem('darkMode');
    return saved === 'true';
  });

  useEffect(() => {
    // Apply dark mode class on mount and when changed
    if (isDarkMode) {
      document.body.classList.add('e-dark-mode');
    } else {
      document.body.classList.remove('e-dark-mode');
    }
    
    // Save to localStorage
    localStorage.setItem('darkMode', isDarkMode.toString());
  }, [isDarkMode]);

  const toggleDarkMode = () => {
    setIsDarkMode(!isDarkMode);
  };

  return (
    <div>
      <ButtonComponent onClick={toggleDarkMode}>
        Toggle {isDarkMode ? 'Light' : 'Dark'} Mode
      </ButtonComponent>
    </div>
  );
}

export default App;

With System Preference Detection

import React, { useState, useEffect } from 'react';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  const [isDarkMode, setIsDarkMode] = useState(() => {
    // Check system preference
    return window.matchMedia('(prefers-color-scheme: dark)').matches;
  });

  useEffect(() => {
    // Listen for system preference changes
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleChange = (e) => {
      setIsDarkMode(e.matches);
    };
    
    mediaQuery.addEventListener('change', handleChange);
    return () => mediaQuery.removeEventListener('change', handleChange);
  }, []);

  useEffect(() => {
    // Apply dark mode class
    if (isDarkMode) {
      document.body.classList.add('e-dark-mode');
    } else {
      document.body.classList.remove('e-dark-mode');
    }
  }, [isDarkMode]);

  const toggleDarkMode = () => {
    setIsDarkMode(!isDarkMode);
  };

  return (
    <div>
      <p>Current mode: {isDarkMode ? 'Dark' : 'Light'}</p>
      <ButtonComponent onClick={toggleDarkMode}>
        Override System Preference
      </ButtonComponent>
    </div>
  );
}

export default App;

Icon Library Usage

Installation and Setup
Using Icons
Icon Sizing
Icon Customization
Common Icon Classes
Icons in Syncfusion Components
Available Icons by Theme

Overview

Syncfusion provides a comprehensive icon library with pre-designed, font-based icons embedded in themes. Icons ensure visual consistency across components and are available via npm or CDN.

Installation and Setup

Using npm

Install the icon package:

npm install @syncfusion/ej2-icons@latest

Import icon styles in your CSS file:

/* src/App.css */
@import "../node_modules/@syncfusion/ej2-icons/styles/material3.css";

Available themes: material3.css, fluent2.css, bootstrap5.css, tailwind3.css, material.css, bootstrap.css, fabric.css, highcontrast.css

Using CDN

⚠️ Important: The CDN version MUST match your installed npm package version to avoid style issues.

Find your installed version:

npm list @syncfusion/ej2-icons

Use the matching CDN version:

<!-- Replace {VERSION} with your installed package version -->
<link href="https://cdn.syncfusion.com/ej2/{VERSION}/ej2-icons/styles/material3.css" rel="stylesheet"/>

<!-- Example: If your version is 33.1.44 -->
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-icons/styles/material3.css" rel="stylesheet"/>

Using Icons

Basic Icon Usage

Icons require two CSS classes: 1. `e-icons` - Base class providing font styling 2. Icon-specific class - Defines the glyph (e.g., e-paste, e-search, e-edit)

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import '@syncfusion/ej2-material3-theme/material3.css';
import '@syncfusion/ej2-icons/styles/material3.css';

function App() {
  return (
    <div>
      {/* Standalone icons */}
      <span className="e-icons e-paste"></span>
      <span className="e-icons e-search"></span>
      <span className="e-icons e-edit"></span>
      
      {/* Icons in buttons */}
      <ButtonComponent iconCss="e-icons e-save">Save</ButtonComponent>
      <ButtonComponent iconCss="e-icons e-delete">Delete</ButtonComponent>
    </div>
  );
}

Custom Icon Font-Size

/* Custom sizing beyond utility classes */
.icon-xl { font-size: 32px; }
.icon-xxl { font-size: 48px; }
.icon-inline { font-size: inherit; }  /* Match parent text size */

<span className="e-icons e-star icon-xl"></span>
<span className="e-icons e-star icon-xxl"></span>
<h2>Heading <span className="e-icons e-info icon-inline"></span></h2>

Icon Sizing

Use utility classes: e-small (8px), e-medium (16px), e-large (24px)

<span className="e-icons e-small e-search"></span>
<span className="e-icons e-medium e-search"></span>
<span className="e-icons e-large e-search"></span>

Responsive Sizing

.icon-responsive { font-size: 16px; }
@media (min-width: 768px) { .icon-responsive { font-size: 20px; } }
@media (min-width: 1024px) { .icon-responsive { font-size: 24px; } }

Icon Customization

Color Customization

.icon-primary { color: #6200ee; }
.icon-success { color: #4caf50; }
.icon-error { color: #f44336; }

<span className="e-icons e-check icon-success"></span>
<span className="e-icons e-close icon-error"></span>

Background and Padding

.icon-badge {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #6200ee;
  color: white;
}

CSS Effects

.icon-hover { transition: all 0.3s ease; cursor: pointer; }
.icon-hover:hover { color: #6200ee; transform: scale(1.2); }

.icon-rotate { animation: rotate 2s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }

.icon-pulse { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

Common Icon Classes

Navigation Icons

e-menu - Hamburger menu
e-close - Close/X button
e-chevron-left, e-chevron-right - Navigation arrows
e-chevron-up, e-chevron-down - Vertical navigation
e-expand, e-collapse - Expand/collapse controls
e-arrow-left, e-arrow-right - Back/forward arrows

Action Icons

e-edit - Edit/pencil
e-delete - Delete/trash
e-save - Save/disk
e-copy, e-paste, e-cut - Clipboard operations
e-search - Search/magnifier
e-filter - Filter/funnel
e-add, e-plus - Add/create new
e-remove, e-minus - Remove/subtract

Status Icons

e-check - Success/checkmark
e-close - Error/X
e-warning - Warning/alert
e-info - Information
e-lock, e-unlock - Security status
e-eye, e-eye-slash - Visibility toggle

File and Media Icons

e-folder, e-folder-open - Folder states
e-file - Generic file
e-upload, e-download - Transfer operations
e-image - Image file
e-video - Video file
e-music - Audio file

UI Controls

e-settings - Settings/gear
e-more-vert, e-more-horiz - More options menu
e-refresh - Refresh/reload
e-calendar - Calendar/date
e-clock - Clock/time
e-bell - Notifications
e-user - User/profile

Usage Examples

{/* Navigation */}
<button><span className="e-icons e-menu"></span></button>
<button><span className="e-icons e-chevron-left"></span> Back</button>

{/* Actions */}
<span className="e-icons e-search"></span>
<span className="e-icons e-edit"></span>
<span className="e-icons e-delete"></span>

{/* Status indicators */}
<span className="e-icons e-check icon-success"></span>
<span className="e-icons e-warning icon-warning"></span>

Icons in Syncfusion Components

Buttons

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

<ButtonComponent iconCss="e-icons e-save">Save</ButtonComponent>
<ButtonComponent iconCss="e-icons e-download" iconPosition="Right">Download</ButtonComponent>
<ButtonComponent iconCss="e-icons e-search" />  {/* Icon only */}

Available Icons by Theme

Each theme includes 200+ icons. View complete icon galleries:

Material 3: https://ej2.syncfusion.com/products/icons/material3/demo.html
Fluent 2: https://ej2.syncfusion.com/products/icons/fluent2/demo.html
Bootstrap 5: https://ej2.syncfusion.com/products/icons/bootstrap5/demo.html
Tailwind 3: https://ej2.syncfusion.com/products/icons/tailwind3/demo.html

All themes share the same icon class names (e.g., e-search works across all themes), but glyph designs vary per theme aesthetic.

Related skills

Lark Openapi ExplorerInstantly explore, test, and generate calls against the full Lark (Feishu) OpenAPI surface without leaving their agent workflow.493k

Lark EventConsume real-time events from Lark/Feishu as structured NDJSON streams inside AI agent workflows.387k16k

Lark Openapi ExplorerWhen an existing Lark/Feishu skill or CLI command cannot fulfill a specific requirement and they need to discover and invoke the exact native OpenAPI endpoint.386k16k

Just ScrapeQuickly search, crawl, extract structured JSON, or monitor web pages without writing custom scraping code.245k41

Lark AppsQuery the current visibility and permission scope of a Lark (Feishu) app without writing HTTP client code.235k16k

Design An InterfaceGenerate multiple radically different interface or API designs in parallel before committing to one.188k198k

How it compares

Use syncfusion-react-themes for EJ2-specific CSS, icons, and Theme Studio workflows; use dark-mode-implementer for app-wide Tailwind or next-themes setups outside Syncfusion.

FAQ

How many themes does syncfusion-react-themes document?

syncfusion-react-themes references 10+ built-in Syncfusion themes importable via npm packages, CDN links, per-component styles, or optimized tailwind3-lite bundles for reduced CSS size.

How do you enable dark mode in Syncfusion React?

syncfusion-react-themes adds the e-dark-mode class to document.body for global dark mode, with checkbox or toggle handlers shown in React TypeScript examples. Per-component dark styling is also documented in references/dark-mode.md.

What version is syncfusion-react-themes?

syncfusion-react-themes metadata lists version 33.1.44 by Syncfusion Inc. CDN examples use matching ej2/33.1.44 CSS URLs to stay aligned with installed npm package versions.

Backend & APIsbackendintegrations

About

Syncfusion React Themes by the numbers

Add your badge

How do you apply Syncfusion React themes and dark mode?

Who is it for?

When should I use this skill?

What you get

By the numbers

Files

Themes in Syncfusion React Components

Table of Contents

Documentation and Navigation Guide

Built-in Themes

Dark Mode Implementation

CSS Variables Customization

Icon Library

Size Modes

Advanced Features

Quick Start

Install and Apply a Theme

Common Patterns

Pattern 1: Apply Dark Mode Globally

Pattern 2: Customize Primary Color with CSS Variables

Pattern 3: Enable Touch Mode Globally

Pattern 4: Use Optimized CSS for Faster Loading

Pattern 5: Use Icons from Syncfusion Library

Advanced Theming Features

Table of Contents

Size Modes (Touch Support)

Global Size Mode

Component-Specific Size Mode

Runtime Size Mode Switching

Styled-Components Integration

Basic Styled-Components Usage

Dynamic Styling with Props

Theme-Aware Styling

Theme Studio Customization

Accessing Theme Studio

Customizing Theme Colors

Using Downloaded Theme

Re-importing Settings

Filtering Components

Component-Specific Styling

Button Customization

Built-in Themes

Table of Contents

Available Themes

Applying Themes via npm

All Components (Combined)

Applying Themes via CDN

Find Your Installed Version

Usage

Available CDN Links

Individual Component Themes

From Individual Packages (Recommended)

From @syncfusion/ej2 Package

Dependency Order

Optimized (Lite) CSS Files

File Size Comparison

Using Lite Versions

CSS Variables for Theme Customization

Table of Contents

Overview

CSS Variable Structure

Material 3 Theme (RGB Format)

Fluent 2 / Bootstrap 5.3 / Tailwind 3.4 (Hex Format)

Accessing Theme Variables

In CSS Files

Color Customization

Material 3 (RGB Format)

Fluent 2 (Hex Format)

Bootstrap 5.3 (Hex Format)

Tailwind 3.4 (Hex Format)

Dark Mode Implementation

Table of Contents

Overview

Global Dark Mode

Static Dark Mode

Dynamic Dark Mode with State

Per-Component Dark Mode