Vue

Search results

Theming

The Syncfusion Vue library has provided the below list of in-built themes,

Google’s Material
Microsoft Office’s Fabric
Bootstrap
High Contrast

The Syncfusion Bootstrap theme is designed based on Bootstrap v3, however it can be compatible 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 control theme

We can get the individual theme from individual npm package or from overall ej2 npm 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 individual control theme will not include its dependent controls styles. i.e. The dependent controls theme should be added before adding the individual control themes.

Common Variables

The below list of common variables used in the Syncfusion Vue 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`

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`