Colors

We have a series of colors that are used by default. They include:

  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info

Color Classes Variation:

Color Options Class Description
Background Color .bg-{colorName} This class is used for background color.
Lighten Background Color .bg-{colorName}.bg-lighten-* For lighten background color, these two classes are needed. Here *: 1,2,3,4 lighten color options.
Darken Background Color .bg-{colorName}.bg-darken-* For darken background color, these two classes are needed. Here *: 1,2,3,4 darken color options.
Background With light Color .bg-light-{colorName} This class is used to set background color to bg-lighten-4.
Background With Overlay Color .overlay-{colorName} This class is used for set opacity value to 0.4 of background color.
Border Color .border-{colorName} This class is used for border color.
Specific Border Color .border-{direction}-{colorName} This class is used for specific border color. Here direction: {top | bottom | left | right}.
Text Color .{colorName} This class is used for text color.
Lighten Text Color .{colorName}.lighten-* These two classes are used to lighten text color. Here *: 1,2,3,4 lighten color options.
Darken Text Color .{colorName}.darken-* These two classes are used to darken text color. Here *: 1,2,3,4 darken color options.

Gradients

We provide 9 different gradient colors and the colors are taken from the color palette of Apex. The css for gradient colors is in app-assets/css/colors.css file.

Below are the options for gradients:

Options Description
CSS
Change Colors/Direction You may change the colors and/or directions of the gradients that we provide. You are supposed to change it from assets/css/ folder.
Change Gradient Colors for the Menu You may change the colors and/or directions for the menu background gradient colors. You are supposed to change it from assets/css/ folder.
HTML
Change Gradients for the Menu To change the gradient name for the menu, you have to change value of data-background-color attribute which is with .app-sidebar class.
Note! It is recommended not to change or remove such colors from app-assets/ folder or src/ folder. If you still want to change in these folders, then those data will go away when we give further updates for the Apex Admin template.

Reference:

Type URL
Template Page path-to-apex-page/color-palette.html