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 vue

$theme-colors: (
    "primary": $primary,
    "secondary": $secondary,
    "success": $success,
    "info": $info,
    "warning": $warning,
    "danger": $danger,
    "light": $light,
    "dark": $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 vue

$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