SCSS Configurations

Important

Please note in order to change template configurations through config.scss file, you must have knowledge of SASS compilation. A SASS compiler must be installed and running in order to save the changes in .scss file. If you need any support regarding this, please contact us.

If you want to change the configurations for the template you can do it just by changing values in config.scss file.

Location: lib/scss/config.scss

Color system

How to use colors?

Click here to know how to use colors in your template.


Color system has 3 main types of colors:

  1. Basic colors
  2. Bootstrap colors
  3. Additional colors

1. Basic colors

Values for basic colors is predefined, but you can change them if you want.

Line no: 35

// Basic Colors
$white                                                  :#FFFFFF !global;
$black                                                  :#000000 !global;
$grey                                                   :#9E9E9E !global;

2. Bootstrap colors

Values for Bootstrap colors is predefined, but you can change them if you want.

Line no: 40

// Bootstrap Colors
$primary                                                :#2196F3 !global;
$success                                                :#4CAF50 !global;
$info                                                   :#00BCD4 !global;
$warning                                                :#FF5722 !global;
$danger                                                 :#F44336 !global;

2. Additional colors

This is where the fun part begins. You can edit existing colors or create your own colors if you want. No additional knowledge required.

Line no: 47

// Additional Colors Map
$colors-list: (
    "primary"                                           :$primary,
    "success"                                           :$success,
    "info"                                              :$info,
    "warning"                                           :$warning,
    "danger"                                            :$danger,
    "grey"                                              :$grey,
    "black"                                             :$black,
    "pink"                                              :#E91E63,
    "purple"                                            :#9C27B0,
    "dpurple"                                           :#673AB7,
    "indigo"                                            :#3F51B5,
    "teal"                                              :#009688,
    "lgreen"                                            :#8BC34A,
    "lime"                                              :#CDDC39,
    "amber"                                             :#FFC107,
    "brown"                                             :#795548,
    "slate"                                             :#607D8B,
) !global;
To change an existing color value:
  1. Change the color value mentioned in the map (Eg. #E91E63) to the value you want. Do not remove # from the color value. Also remember to put a comma (,) after the color value.
  2. Save the file and compile it to CSS

    "pink"                                              :#E91E63,
To change an existing color name:
  1. Change the color name mentioned in the map (Eg. "pink") to the name you want. Do not remove "" from the color name.
  2. SAVE the file and compile it to CSS

    "pink"                                              :#E91E63,
To add new color:
  1. To create a new color, just add a new color name and color value as mentioned in the below code.
  2. SAVE the file and compile it to CSS

// Additional Colors Map
$colors-list: (
    "pink"                                              :#E91E63,
    "your-color-name"                                   :your-color-value,
) !global;