React

Search results

Theming

24 May 2022 / 11 minutes to read

The Syncfusion React library has provided the below list of in-built themes those are,

Google’s Material
Microsoft Office’s Fabric
Bootstrap
Bootstrap v4
Bootstrap v5
High Contrast
Tailwind CSS

The Syncfusion Bootstrap theme is designed based on Bootstrap v3, however, it can be compatible with Bootstrap v4 applications. In addition to these four built-in themes, ThemeStudio provides support for the Fusion Theme that can only be downloaded from ThemeStudio.

Themes are shipped as individual and combined CSS files. Combined CSS file can be referred from the npm package @syncfusion/ej2 and individual CSS files are available within same component repository’s style folder. In ej2 npm packages, we have shipped both CSS and SCSS files for all components.

Referring All components CSS

@import "./node_modules/@syncfusion/ej2/<theme_name>.css";

Referring All components SCSS

@import "ej2/<theme_name>.scss";

Referring individual component theme

We can get the individual theme from individual package or from ej2 package.

Referring individual control from individual package

@import "<dependent-package>/<dependent-control>/<theme_name>.scss";
@import "ej2-react-buttons/styles/button/<theme_name>.scss";

Example:

@import "ej2-base/styles/material.scss";
@import "ej2-react-buttons/styles/button/material.scss";

ej2-base is common dependent package for all Syncfusion React component styles. So, it needs first to be added in the import statement.

Referring individual control from ej2 package

@import "ej2/<dependent-control>/<theme_name>.scss";
@import "ej2/button/<theme_name>.scss";

Example:

@import "ej2/base/material.scss";
@import "ej2/button/material.scss";

Common Variables

The below list of common variables are used in the Syncfusion React library themes for all components. You can change these variables to customize the corresponding theme.

Google’s Material

Name	Value
`$accent`	`#e3165b`
`$accent-font`	`#ffffff`
`$primary`	`#3f51b5`
`$primary-50`	`#e8eaf6`
`$primary-100`	`#c5cae9`
`$primary-200`	`#9fa8da`
`$primary-300`	`#7986cb`
`$primary-font`	`#ffffff`
`$primary-50-font`	`#000000`
`$primary-100-font`	`#000000`
`$primary-200-font`	`#000000`
`$primary-300-font`	`#ffffff`
`$grey-white`	`#ffffff`
`$grey-black`	`#000000`
`$grey-50`	`#fafafa`
`$grey-100`	`#f5f5f5`
`$grey-200`	`#eeeeee`
`$grey-300`	`#e0e0e0`
`$grey-400`	`#bdbdbd`
`$grey-500`	`#9e9e9e`
`$grey-600`	`#757575`
`$grey-700`	`#616161`
`$grey-800`	`#424242`
`$grey-900`	`#212121`
`$grey-dark`	`#303030`
`$grey-light-font`	`#000000`
`$grey-dark-font`	`#ffffff`
`$base-font`	`#000000`
`$error-font`	`#f44336`

Microsoft Office’s Fabric

Name	Value
`$theme-primary`	`#0078d7`
`$theme-dark-alt`	`darken($theme-primary, 3%)`
`$theme-dark`	`darken($theme-primary, 10%)`
`$theme-darker`	`darken($theme-primary, 18%)`
`$theme-secondary`	`lighten($theme-primary, 3%)`
`$theme-tertiary`	`lighten($theme-primary, 21%)`
`$theme-light`	`lighten($theme-primary, 44%)`
`$theme-lighter`	`lighten($theme-primary, 49%)`
`$theme-lighter-alt`	`lighten($theme-primary, 55%)`
`$neutral-white`	`#ffffff`
`$neutral-lighter-alt`	`#f8f8f8`
`$neutral-lighter`	`#f4f4f4`
`$neutral-light`	`#eaeaea`
`$neutral-quintenaryalt`	`#dadada`
`$neutral-quintenary`	`#d0d0d0`
`$neutral-tertiary-alt`	`#c8c8c8`
`$neutral-tertiary`	`#a6a6a6`
`$neutral-secondary-alt`	`#767676`
`$neutral-secondary`	`#666666`
`$neutral-primary`	`#333333`
`$neutral-dark`	`#212121`
`$neutral-black`	`#000000`
`$alert-bg`	`#deecf9`
`$error-bg`	`#fde7e9`
`$success-bg`	`#dff6dd`
`$theme-dark-font`	`#ffffff`
`$theme-primary-font`	`#ffffff`
`$theme-light-font`	`#333333`
`$neutral-light-font`	`#333333`
`$neutral-light-fontalt`	`#000000`
`$grey-dark-font`	`#ffffff`
`$base-font`	`#333333`
`$message-font`	`#333333`
`$alert-font`	`#d83b01`
`$error-font`	`#a80000`
`$success-font`	`#107c10`

Bootstrap

Name	Value
`$brand-primary`	`#317ab9`
`$brand-primary-darken-10`	`#3071a9`
`$brand-primary-darken-15`	`#2a6496`
`$brand-primary-darken-25`	`#1f496e`
`$brand-primary-darken-35`	`#142f46`
`$brand-primary-font`	`#ffffff`
`$grey-base`	`#000000`
`$grey-darker`	`#222222`
`$grey-dark`	`#333333`
`$grey`	`#555555`
`$grey-light`	`#777777`
`$grey-44`	`#444444`
`$grey-88`	`#888888`
`$grey-99`	`#999999`
`$grey-8c`	`#8c8c8c`
`$grey-ad`	`#adadad`
`$grey-dark-font`	`#ffffff`
`$grey-white`	`#ffffff`
`$grey-lighter`	`#eeeeee`
`$grey-f9`	`#f9f9f9`
`$grey-f8`	`#f8f8f8`
`$grey-f5`	`#f5f5f5`
`$grey-e6`	`#e6e6e6`
`$grey-dd`	`#dddddd`
`$grey-d4`	`#d4d4d4`
`$grey-cc`	`#cccccc`
`$grey-light-font`	`#333333`
`$brand-success`	`#5cb85c`
`$brand-success-dark`	`#3c763d`
`$brand-info`	`#5bc0de`
`$brand-info-dark`	`#31708f`
`$brand-warning`	`#f0ad4e`
`$brand-warning-dark`	`#8a6d3b`
`$brand-danger`	`#d9534f`
`$brand-danger-dark`	`#a94442`
`$brand-success-light`	`#dff0d8`
`$brand-info-light`	`#d9edf7`
`$brand-warning-light`	`#fcf8e3`
`$brand-danger-light`	`#f2dede`
`$input-border-focus`	`#66afe9`
`$brand-success-font`	`#3c763d`
`$brand-info-font`	`#31708f`
`$brand-warning-font`	`#8a6d3b`
`$brand-danger-font`	`#a94442`
`$base-font`	`#000000`

Bootstrap 4

Name	Value
`$white`	`#ffffff`
`$gray-100`	`#f8f9fa`
`$gray-200`	`#e9ecef`
`$gray-300`	`#dee2e6`
`$gray-400`	`#ced4da`
`$gray-500`	`#adb5bd`
`$gray-600`	`#6c757d`
`$gray-700`	`#495057`
`$gray-800`	`#343a40`
`$gray-900`	`#212529`
`$black`	`#000000`
`$blue`	`#007bff`
`$indigo`	`#6610f2`
`$purple`	`#6f42c1`
`$pink`	`#e83e8c`
`$red`	`#dc3545`
`$orange`	`#fd7e14`
`$yellow`	`#ffc107`
`$green`	`#28a745`
`$teal`	`#20c997`
`$cyan`	`#17a2b8`

Bootstrap 5

Name	Value
`$black`	`#000`
`$white`	`#fff`
`$gray-100`	`#f8f9fa`
`$gray-200`	`#e9ecef`
`$gray-300`	`#dee2e6`
`$gray-400`	`#ced4da`
`$gray-500`	`#adb5bd`
`$gray-600`	`#6c757d`
`$gray-700`	`#495057`
`$gray-800`	`#343a40`
`$gray-900`	`#212529`
`$blue`	`#0d6efd`
`$indigo`	`#6610f2`
`$purple`	`#6f42c1`
`$pink`	`#d63384`
`red`	`#dc3545`
`$orange`	`#fd7e14`
`$yellow`	`#ffc107`
`$green`	`#198754`
`$teal`	`#20c997`
`$cyan`	`#0dcaf0`

High Contrast

Name	Value
`$selection-bg`	`#ffd939`
`$selection-font`	`#000000`
`$selection-border`	`#ffd939`
`$hover-bg`	`#685708`
`$hover-font`	`#ffffff`
`$hover-border`	`#ffffff`
`$border-default`	`#969696`
`$border-alt`	`#757575`
`$border-fg`	`#ffffff`
`$border-fg-alt`	`#ffd939`
`$bg-base-0`	`#000000`
`$bg-base-5`	`#0d0d0d`
`$bg-base-10`	`#1a1a1a`
`$bg-base-15`	`#262626`
`$bg-base-20`	`#333333`
`$bg-base-75`	`#bfbfbf`
`$bg-base-100`	`#ffffff`
`$header-font`	`#ffd939`
`$header-font-alt`	`#ffffff`
`$content-font`	`#ffffff`
`$content-font-alt`	`#969696`
`$link`	`#8a8aff`
`$invert-font`	`#000000`
`$success-bg`	`#166600`
`$error-bg`	`#b30900`
`$message-font`	`#ffffff`
`$alert-bg`	`#944000`
`$info-bg`	`#0056b3`
`$success-alt`	`#2bc700`
`$error-alt`	`#ff6161`
`$alert-alt`	`#ff7d1a`
`$info-alt`	`#66b0ff`
`$disable`	`#757575`

Tailwind CSS

Name	Value (Default Theme)	Value (Dark Theme)
`$black`	`#000`	`#000`
`$white`	`#fff`	`#fff`
`$cool-gray-50`	`#f9fafb`	`#f9fafb`
`$cool-gray-100`	`#f3f4f6`	`#f3f4f6`
`$cool-gray-200`	`#e5e7eb`	`#e5e7eb`
`$cool-gray-300`	`#d1d5db`	`#d1d5db`
`$cool-gray-400`	`#9ca3af`	`#9ca3af`
`$cool-gray-500`	`#6b7280`	`#6b7280`
`$cool-gray-600`	`#4b5563`	`#4b5563`
`$cool-gray-700`	`#374151`	`#374151`
`$cool-gray-800`	`#1f2937`	`#1f2937`
`$cool-gray-900`	`#111827`	`#111827`
`$red-50`	`#fef2f2`	`#fef2f2`
`$red-100`	`#fee2e2`	`#fee2e2`
`$red-200`	`#fecaca`	`#fecaca`
`$red-300`	`#fca5a5`	`#fca5a5`
`$red-400`	`#f87171`	`#f87171`
`$red-500`	`#ef4444`	`#ef4444`
`$red-600`	`#dc2626`	`#dc2626`
`$red-700`	`#b91c1c`	`#b91c1c`
`$red-800`	`#991b1b`	`#991b1b`
`$red-900`	`#7f1d1d`	`#7f1d1d`
`$green-50`	`#f0fdf4`	`#f0fdf4`
`$green-100`	`#dcfce7`	`#dcfce7`
`$green-200`	`#bbf7d0`	`#bbf7d0`
`$green-300`	`#86efac`	`#86efac`
`$green-500`	`#22c55e`	`#22c55e`
`$green-600`	`#16a34a`	`#16a34a`
`$green-700`	`#15803d`	`#15803d`
`$green-800`	`#166534`	`#166534`
`$green-900`	`#14532d`	`#14532d`
`$orange-50`	`#fff7ed`	`#fff7ed`
`$orange-100`	`#ffedd5`	`#ffedd5`
`$orange-200`	`#fed7aa`	`#fed7aa`
`$orange-300`	`#fdba74`	`#fdba74`
`$orange-400`	`#fb923c`	`#fb923c`
`$orange-500`	`#f97316`	`#f97316`
`$orange-600`	`#ea580c`	`#ea580c`
`$orange-700`	`#c2410c`	`#c2410c`
`$orange-800`	`#9a3412`	`#9a3412`
`$orange-900`	`#7c2d12`	`#7c2d12`
`$cyan-50`	`#ecfeff`	`#ecfeff`
`$cyan-100`	`#cffafe`	`#cffafe`
`$cyan-200`	`#a5f3fc`	`#a5f3fc`
`$cyan-300`	`#67e8f9`	`#67e8f9`
`$cyan-400`	`#22d3ee`	`#22d3ee`
`$cyan-500`	`#06b6d4`	`#06b6d4`
`$cyan-600`	`#0891b2`	`#0891b2`
`$cyan-700`	`#0e7490`	`#0e7490`
`$cyan-800`	`#155e75`	`#155e75`
`$cyan-900`	`#164e63`	`#164e63`
`$indigo-50`	`#eef2ff`	`#eef2ff`
`$indigo-100`	`#e0e7ff`	`#e0e7ff`
`$indigo-200`	`#c7d2fe`	`#c7d2fe`
`$indigo-300`	`#a5b4fc`	`#a5b4fc`
`$indigo-400`	`#818cf8`	`#818cf8`
`$indigo-500`	`#6366f1`	`#6366f1`
`$indigo-600`	`#4f46e5`	`#4f46e5`
`$indigo-700`	`#4338ca`	`#4338ca`
`$indigo-800`	`#3730a3`	`#3730a3`
`$indigo-900`	`#312e81`	`#312e81`