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/booksto-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:   #0aab93 !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink:   #d63384 !default;
$red:    #eb5757 !default;
$orange: #FAA938 !default;
$yellow: #f16a1b !default;
$green:  #219653 !default;
$teal:   #f68685 !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

$custom-colors: (
  "default": (
    "primary":   #0dd6b8,
    "secondary": #6c757d,
    "success":   #219653,
    "warning":   #f16a1b,
    "danger":    #eb5757,
    "info":      #08B1BA,
    "light":     #dee2e6,
    "dark":      #000000,
    "gray":      #6c757d,
  ),
  "color-1": (
    "primary":   #304297,
    "secondary": #ff6b3b,
    "success":   #219653,
    "warning":   #f16a1b,
    "danger":    #eb5757,
    "info":      #08B1BA,
    "light":     #dee2e6,
    "dark":      #000000,
    "gray":      #6c757d,
  ),
  "color-2": (
    "primary":    #e63946,
    "secondary": #1d3557,
    "success":   #219653,
    "warning":   #f16a1b,
    "danger":    #eb5757,
    "info":      #08B1BA,
    "light":     #dee2e6,
    "dark":      #000000,
    "gray":      #6c757d,
  ),
  "color-3": (
    "primary":   #d45ba1,
    "secondary": #5d81cb,
    "success":   #219653,
    "warning":   #f16a1b,
    "danger":    #eb5757,
    "info":      #08B1BA,
    "light":     #dee2e6,
    "dark":      #000000,
    "gray":      #6c757d,
  ),
  "color-4": (
    "primary":   #00b0d1,
    "secondary": #4181b3,
    "success":   #219653,
    "warning":   #f16a1b,
    "danger":    #eb5757,
    "info":      #08B1BA,
    "light":     #dee2e6,
    "dark":      #000000,
    "gray":      #6c757d,
  ),
  "color-5": (
    "primary":   #15475B,
    "secondary": #A42E51,
    "success":   #219653,
    "warning":   #f16a1b,
    "danger":    #eb5757,
    "info":      #08B1BA,
    "light":     #dee2e6,
    "dark":      #000000,
    "gray":      #6c757d,
  )
) !default;
Previous Next