Theming

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. High Contrast

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

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

Referring individual Component from ej2 package

@import "ej2/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 #ff4081 #ff4081
$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 #006fc8 darken($theme-primary, 3%)
$theme-dark #005ca4 darken($theme-primary, 10%)
$theme-darker #00457b darken($theme-primary, 18%)
$theme-secondary #0081e6 lighten($theme-primary, 3%)
$theme-tertiary #43acff lighten($theme-primary, 21%)
$theme-light #b8e0ff lighten($theme-primary, 44%)
$theme-lighter #d2ebff lighten($theme-primary, 49%)
$theme-lighter-alt #f1f9ff 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 #428bca #428bca
$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 #ff4081
$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

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