Menu
GETTING STARTED
CONTENT
UTILITIES
Menu

Background Color

You can browse this page to learn the background color properties of the template.

This template has some predefined background colors. Using them is extremely easy.

Syntax Example

<div class="back-gradient"></div>

<div class="back-primary"></div>

<div class="back-success"></div>

<div class="back-danger"></div>

<div class="back-warning"></div>

<div class="back-black"></div>

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;

_utilities.scss

								
.back-primary {
  background: $primaryColor;
}

.back-success {
  background: $successColor;
}

.back-danger {
  background: $dangerColor;
}

.back-warning {
  background: $warningColor;
}

If you are not using SCSS, you can change the following section from the html/assets/css/theme.css file.

								
.back-primary {
  background: #335EEA;
}

.back-success {
  background: #00C9A7;
}

.back-danger {
  background: #DE4437;
}

.back-warning {
  background: #FDBF30;
}