React Component Themes

Syncfusion^® React UI components include a built-in Material theme, offering both light and dark mode options. The Material theme adheres to Material Design 3 standards, ensuring a modern, consistent, and intuitive user experience. Optimized for performance, this theme enables faster app loading while maintaining a polished, elegant appearance with minimal overhead.

Referencing themes in the React application

Users can integrate themes into their React applications using one of the following methods:

NPM Packages - Ideal for customizing existing themes and bundling styles directly into your application for optimal performance.
CDN - Useful for quickly referencing complete CSS files via static web assets without managing local files.

NPM packages

Use NPM packages to install and reference themes. This method allows you to import only the required styles and include them in your build process.

Install Syncfusion^® React packages

Install the necessary packages from NPM. For example, to use the Message component from @syncfusion/react-notifications, run:

npm install @syncfusion/react-notifications

npm install @syncfusion/react-notifications

Syncfusion^® packages include both CSS and SCSS source files, enabling customization. The styles are located in the styles folder of each component package (e.g., @syncfusion/react-notifications/styles).

Referencing themes for individual components

Syncfusion® theming system allows you to apply themes to individual components from their respective packages, enabling granular customization without importing the entire theme bundle.

@import "<dependent-package>/styles/<theme_name>.css";
@import "react-notifications/styles/message/<theme_name>.css";

@import "<dependent-package>/styles/<theme_name>.css";
@import "react-notifications/styles/message/<theme_name>.css";

Example for Material Theme:

@import "react-base/styles/material.css";
@import "react-notifications/styles/message/material.css";

@import "react-base/styles/material.css";
@import "react-notifications/styles/message/material.css";

The react-base package is a common dependency for all Syncfusion® React component styles. It must be imported first in the stylesheet.

Referencing themes for all components

To use multiple components from the same package (e.g., Message, Toast, Skeleton from @syncfusion/react-notifications), reference the package-level stylesheet instead of importing each component’s style individually.

Example:

@import "@syncfusion/react-base/styles/material.css";
@import "@syncfusion/react-notifications/styles/material.css";

@import "@syncfusion/react-base/styles/material.css";
@import "@syncfusion/react-notifications/styles/material.css";

CDN reference

For quick integration or lightweight setups, such as static applications using CDN, users can reference the Material theme directly from a CDN.

Add the following link tag to your HTML <head> tag:

<head>
  <link href="https://unpkg.com/@syncfusion/react-base@32.1.19/styles/material.css" rel="stylesheet" />
  <link href="https://unpkg.com/@syncfusion/react-notifications@32.1.19/styles/material.css" rel="stylesheet" />
</head>

<head>
  <link href="https://unpkg.com/@syncfusion/react-base@32.1.19/styles/material.css" rel="stylesheet" />
  <link href="https://unpkg.com/@syncfusion/react-notifications@32.1.19/styles/material.css" rel="stylesheet" />
</head>

Match the CDN version to your installed Syncfusion^® React package version to avoid compatibility issues.

Switching light and dark mode with CSS variables

Experience seamless light and dark mode switching with our modern theme. It provides distinct CSS variables within a single file, ensuring flexible and effortless transitions. To enable dark mode, simply append the sf-dark-mode class to your application's <body> element. Once applied, the theme will switch to dark mode effortlessly.

Enable Darkmode