Search results

Theming

04 Feb 2022 / 10 minutes to read

THe Essential JS 2 has provided the below list of in-built themes those are,

  1. Google’s Material
  2. Microsoft Office’s Fabric
  3. Bootstrap
  4. Bootstrap v4
  5. Bootstrap v5
  6. High Contrast
  7. Tailwind CSS

The Essential JS 2 Bootstrap theme is designed based on Bootstrap v3, however it can be compatible in 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

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

Referring All components SCSS

Copied to clipboard
@import "ej2/<theme_name>.scss";

Referring Individual Component Theme

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

Referring individual Component from individual package

Copied to clipboard
@import "ej2-buttons/button/<theme_name>.scss";

Common Variables

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.

Google’s Material

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

Microsoft Office’s Fabric

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

Bootstrap

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

Bootstrap 4

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

Bootstrap 5

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

High Contrast

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

Tailwind CSS

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