Colors customization
Back to top

Color Customization

  1. Home
  2. 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.

Heads Up!

It is not recommend to change any other scss files inside src/scss/ folder apart from following scss/core/variables/_variables.scss, scss/core/variables/_components-variables.scss & scss/core/colors/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.

  • _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.
  • _components-variables.scss: file contain theme components variables, You can customize it based on your preferences.
  • palette-variables.scss: file contain all colors variables, You can customize it based on your preferences.
Tip
  • You just need to change scss/core/variables/_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.
  • Always take back-up of following files scss/core/variables/_variables.scss, scss/core/variables/_components-variables.scss & scss/core/colors/palette-variables.scss scss files 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.