Color Customization

Color Customization

You can easily change theme colors as per your branding or selection by updating color codes. There are two different ways to do that.

Using SCSS

First of all, You must have SCSS knowledge and Node & Gulp installed on your system.

To customize the theme default color, styling & spacing You can change following files scss/core/variables/_variables.scss, scss/core/variables/_components-variables.scss & scss/core/colors/palette-variables.scss as per your preferred colors & styling. If you want to customize material layout you required to change scss/core/variables/_material-variables.scss & scss/core/colors/material-palette-variables.scss files.

Heads Up!

It is not recommend to change any scss files inside src/scss/ folder apart from following scss/core/variables/_bootstrap-variables.scss, scss/core/variables/_components-variables.scss, scss/core/variables/_material-variables.scss, scss/core/colors/palette-variables.scss & scss/core/colors/material-palette-variables.scss scss files to avoid future update conflicts. If you still modify any other files, it may requires to merge it manually with future updates.

  • _bootstrap-variables.scss: file contain bootstrap variables which overrides default bootstrap variables, You can use any bootstrap variable to customize it. By using this file you can change bootstrap primary, secondary, success, danger etc... colors & lot more.
  • _material-variables.scss: file contain material bootstrap variables which overrides default material bootstrap variables, You can use any material bootstrap variable to customize it. By using this file you can change material bootstrap primary, secondary, success, danger etc... colors & lot more.
  • _components-variables.scss: file contain theme components variables, You can customize it based on your preferences.
  • palette-variables.scss: file contain default theme's all colors variables, You can customize it based on your preferences.
  • material-palette-variables: file contain material theme's all colors variables, You can customize it based on your preferences.
Tip
  • In order to customize the default layout You just need to change scss/core/variables/_bootstrap-variables.scss file if you want to change any bootstrap variables. Bootstrap colors will automatically assign to scss/core/colors/palette-variables.scss. Its not required to change in both file.
  • In order to customize the material layout You just need to change scss/core/variables/_material-variables.scss file if you want to change any material bootstrap variables. Bootstrap colors will automatically assign to scss/core/colors/material-palette-variables.scss. Its not required to change in both file.
  • Always take back-up of following files scss/core/variables/_bootstrap-variables.scss, scss/core/variables/_components-variables.scss, scss/core/variables/_material-variables.scss, scss/core/colors/palette-variables.scss & scss/core/colors/material-palette-variables.scss if you are changing them as some times it require manual merge when we release new updates.
Final step, generale all css files using below gulp command

gulp dist-css

Please read the Gulp building tools from gulp commands.

Using CSS

You can use CSS method, If you are not familiar with SCSS.

  • Use assets/css/style.css and override those classes, ids or any other selector color you would like to change. You can also create your own custom css file for this and manually include it on your html page. This is the best way to avoid future updates conflicts and code merge.