THe Essential JS 2 has provided the below list of in-built themes those are,
The Essential JS 2 Bootstrap theme is designed based on
Bootstrap v3
, however it can be compatible inBootstrap 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";
We can get the individual theme from individual package or from ej2 package.
Referring individual Component from individual package
@import "ej2-buttons/button/<theme_name>.scss";
The below list of common variables used in the Essential JS 2 themes for all components. 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 |
---|---|
$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 |
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 |
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 |
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 |