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/_variables.scss file.
  • More Customization will be done in variable file.

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

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark,
  "gray":       $gray,
  "gray-dark":   $gray-dark,
) !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": #089bab,
    "secondary": #787d76,
    "success": #31c02c,
    "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