The Syncfusion JavaScript library has provided the below list of in-built themes,
The Syncfusion Bootstrap theme is designed based on
Bootstrap v3
, however it can be compatible inBootstrap v4
applications.
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 control repository’s style
folder. In ej2 npm packages, we have shipped both CSS and SCSS files for all controls.
Referring All controls CSS
@import "./node_modules/@syncfusion/ej2/<theme_name>.css";
Referring All controls SCSS
@import "ej2/<theme_name>.scss";
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-buttons/styles/button/<theme_name>.scss";
Example:
@import "ej2-base/styles/material.scss";
@import "ej2-buttons/styles/button/material.scss";
ej2-base
is common dependent package for all Syncfusion JavaScript control styles. so, it needs to be added first 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";
The below list of common variables are used in the Syncfusion JavaScript library themes for all UI controls. You can change these variables to customize the corresponding theme.
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 |
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 |
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 |
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 |