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 | https://demos.pixinvent.com/apex-angular-admin-template/demo-1/uikit/colorpalettes |