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-html-admin-template/demo-1/color-palette.html |