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
<p class="text-color-gradient">text</p>	Lorem ipsum dolor sit amet.
<p class="text-color-primary">text</p>	Lorem ipsum dolor sit amet.
<p class="text-color-primary-soft">text</p>	Lorem ipsum dolor sit amet.
<p class="text-color-success">text</p>	Lorem ipsum dolor sit amet.
<p class="text-color-success-soft">text</p>	Lorem ipsum dolor sit amet.
<p class="text-color-danger">text</p>	Lorem ipsum dolor sit amet.
<p class="text-color-warning">text</p>	Lorem ipsum dolor sit amet.
<p class="text-color-reset">text</p>	Lorem ipsum dolor sit amet.
<p class="text-color-heading">text</p>	Lorem ipsum dolor sit amet.
<p class="text-color-soft">text</p>	Lorem ipsum dolor sit amet.
<p class="text-white">text</p>	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;
}