@@include('docs/_sidebar.html', {"page": "styleguide-colors"})

Theme Colors

To change the theme color, add color CSS file you wish to use inside the <head> tag, right after style.css link, in all your HTML pages. Available color options: aqua.css, green.css, leaf.css, navy.css, orange.css, pink.css, purple.css, red.css, violet.css, yellow.css, fuchsia.css, sky.css, grape.css.

View example's code

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

Changing Primary Color

To change the primary color to a custom color, open src/assets/scss/user-variables.scss and assign your custom color value to $primary and recompile.

This quick video demonstrates changing the primary color using gulp.

View example's code

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

Background Colors

.bg-yellow

.bg-pale-yellow

.bg-soft-yellow

.bg-orange

.bg-pale-orange

.bg-soft-orange

.bg-red

.bg-pale-red

.bg-soft-red

.bg-pink

.bg-pale-pink

.bg-soft-pink

.bg-violet

.bg-pale-violet

.bg-soft-violet

.bg-purple

.bg-pale-purple

.bg-soft-purple

.bg-blue

.bg-pale-blue

.bg-soft-blue

.bg-aqua

.bg-pale-aqua

.bg-soft-aqua

.bg-green

.bg-pale-green

.bg-soft-green

.bg-leaf

.bg-pale-leaf

.bg-soft-leaf

.bg-ash

.bg-pale-ash

.bg-soft-ash

.bg-navy

.bg-pale-navy

.bg-soft-navy

.bg-fuchsia

.bg-pale-fuchsia

.bg-soft-fuchsia

.bg-sky

.bg-pale-sky

.bg-soft-sky

.bg-grape

.bg-pale-grape

.bg-soft-grape

.gradient-1

.gradient-2

.gradient-3

.gradient-4

.gradient-5

.gradient-6

.gradient-7

.gradient-8

View example's code

<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

.text-yellow

.text-orange

.text-red

.text-pink

.text-fuchsia

.text-violet

.text-purple

.text-blue

.text-aqua

.text-sky

.text-green

.text-leaf

.text-ash

.text-navy

.text-grape

.text-primary

.text-muted

.text-white

.gradient-1

.gradient-2

.gradient-3

.gradient-4

.gradient-5

.gradient-6

.gradient-7

.gradient-8

View example's code

<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>