Theme colors

Steps to be follow for theme colors with the template:

  • We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Scss variables in scss/hope-ui-design-system/_variables.scss file.
  • More Customization will be done in variable file.

Here is the Change color of template in gulp+scss+hbs

​​$blue:    #3a57e8 !default;
​$indigo:  #6610f2 !default;
​$purple:  #6f42c1 !default;
​$pink:    #d63384 !default;
​$red:     #c03221 !default;
​$orange:  #FAA938 !default;
​$yellow:  #f16a1b !default;
​$green:   #219653 !default;
​$teal:    #001F4D  !default;
​$cyan:    #08B1BA !default;
​

Customizer colors

Steps to be follow for theme colors with the template:

  • We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Scss variables in scss/customizer/_variables.scss file.

Here is the Change color of template in gulp+scss+hbs

"default": (
    ​"primary": #3a57e8,
    ​"secondary": #001F4D,
    ​"success": #1aa053,
    ​"warning": #f16a1b,
    ​"danger": #c03221,
    ​"info": #08B1BA,
    ​"light": #dee2e6,
    ​"dark": #000000,
    ​"gray": #6c757d,
    ​"gray-dark": #343a40,
​);

"color-1": (
    ​"primary": #3a57e8,
    ​"secondary": #001F4D,
    ​"success": #1aa053,
    ​"warning": #f16a1b,
    ​"danger": #c03221,
    ​"info": #08B1BA,
    ​"light": #dee2e6,
    ​"dark": #000000,
    ​"gray": #6c757d,
    ​"gray-dark": #343a40,
​);
Previous Next