Text Color
You can browse this page to learn the text color properties of the template.
This template comes with 10 different default font colors. These 10 colors are assigned to their own classes for easy use. You can find more detailed information in the table below.
Syntax | Example |
---|---|
|
Lorem ipsum dolor sit amet. |
|
Lorem ipsum dolor sit amet. |
|
Lorem ipsum dolor sit amet. |
|
Lorem ipsum dolor sit amet. |
|
Lorem ipsum dolor sit amet. |
|
Lorem ipsum dolor sit amet. |
|
Lorem ipsum dolor sit amet. |
|
Lorem ipsum dolor sit amet. |
|
Lorem ipsum dolor sit amet. |
|
Lorem ipsum dolor sit amet. |
|
Lorem ipsum dolor sit amet. |
If you want, you can change these predefinitions from the scss/_utilities.scss
and scss/_theme-options.scss
files.
_theme-options.scss
// General Colors
$primaryColor: #335EEA;
$primaryColorSoft: #EDF3FF;
$successColor: #00C9A7;
$successColorSoft: #E8FAF6;
$dangerColor: #DE4437;
$dangerColorSoft: #FBEEED;
$warningColor: #FDBF30;
$warningColorSoft: #FFF4DA;
$gray: #F8F9FA;
// Text Colors
$headingColor: #1E2022;
$textColor: #77838F;
$textLight: #C1D0FF;
_utilities.scss
.text-color-primary {
color: $primaryColor !important;
}
.text-color-primary-soft {
color: $primaryColorSoft !important;
}
.text-color-success {
color: $successColor !important;
}
.text-color-success-soft {
color: $successColorSoft !important;
}
.text-color-danger {
color: $dangerColor !important;
}
.text-color-warning {
color: $warningColor !important;
}
.text-color-reset {
color: $textColor !important;
}
.text-color-heading {
color: $headingColor !important;
}
If you are not using SCSS, you can change the following section from the html/assets/css/theme.css
file.
.text-color-primary {
color: #335EEA !important;
}
.text-color-primary-soft {
color: #EDF3FF !important;
}
.text-color-success {
color: #00C9A7 !important;
}
.text-color-success-soft {
color: #E8FAF6 !important;
}
.text-color-danger {
color: #DE4437 !important;
}
.text-color-warning {
color: #FDBF30 !important;
}
.text-color-reset {
color: #77838F !important;
}
.text-color-heading {
color: #1E2022 !important;
}
.text-color-soft {
color: #DBDFE9 !important;
}