Colors

Theme Colors

<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/colors/yellow.css">

Changing Primary Color

//src/assets/scss/user-variables.scss
$primary: #36a6cf;

Background Colors

<div class="bg-yellow"></div>
<div class="bg-pale-yellow"></div>
<div class="bg-soft-yellow"></div>
  
<div class="bg-orange"></div>
<div class="bg-pale-orange"></div>
<div class="bg-soft-orange"></div>
  
<div class="bg-red"></div>
<div class="bg-pale-red"></div>
<div class="bg-soft-red"></div>
  
<div class="bg-pink"></div>
<div class="bg-pale-pink"></div>
<div class="bg-soft-pink"></div>
  
<div class="bg-violet"></div>
<div class="bg-pale-violet"></div>
<div class="bg-soft-violet"></div>
  
<div class="bg-purple"></div>
<div class="bg-pale-purple"></div>
<div class="bg-soft-purple"></div>
  
<div class="bg-blue"></div>
<div class="bg-pale-blue"></div>
<div class="bg-soft-blue"></div>
  
<div class="bg-aqua"></div>
<div class="bg-pale-aqua"></div>
<div class="bg-soft-aqua"></div>
  
<div class="bg-green"></div>
<div class="bg-pale-green"></div>
<div class="bg-soft-green"></div>
  
<div class="bg-leaf"></div>
<div class="bg-pale-leaf"></div>
<div class="bg-soft-leaf"></div>
  
<div class="bg-ash"></div>
<div class="bg-pale-ash"></div>
<div class="bg-soft-ash"></div>
  
<div class="bg-navy"></div>
<div class="bg-pale-navy"></div>
<div class="bg-soft-navy"></div>

<div class="bg-fuchsia"></div>
<div class="bg-pale-fuchsia"></div>
<div class="bg-soft-fuchsia"></div>

<div class="bg-sky"></div>
<div class="bg-pale-sky"></div>
<div class="bg-soft-sky"></div>

<div class="bg-grape"></div>
<div class="bg-pale-grape"></div>
<div class="bg-soft-grape"></div>

<div class="gradient-1"></div>
<div class="gradient-2"></div>
<div class="gradient-3"></div>
<div class="gradient-4"></div>
<div class="gradient-5"></div>
<div class="gradient-6"></div>
<div class="gradient-7"></div>
<div class="gradient-8"></div>

Text Colors

<span class="text-yellow"></span>
<span class="text-orange"></span>
<span class="text-red"></span>
<span class="text-pink"></span>
<span class="text-violet"></span>
<span class="text-purple"></span>
<span class="text-blue"></span>
<span class="text-aqua"></span>
<span class="text-green"></span>
<span class="text-leaf"></span>
<span class="text-ash"></span>
<span class="text-navy"></span>
<span class="text-fuchsia"></span>
<span class="text-sky"></span>
<span class="text-grape"></span>

<span class="text-primary"></span>
<span class="text-muted"></span>
<span class="text-white"></span>

<span class="text-gradient gradient-1"></span>
<span class="text-gradient gradient-2"></span>
<span class="text-gradient gradient-3"></span>
<span class="text-gradient gradient-4"></span>
<span class="text-gradient gradient-5"></span>
<span class="text-gradient gradient-6"></span>
<span class="text-gradient gradient-7"></span>