Colors

Theme colors

Text and link colors

<p class="text-primary">.text-primary</p>
<p class="text-beets">.text-beets</p>

<a href="#" class="link-primary">.link-primary</a>
<a href="#" class="link-beets">.link-beets</a>

Background color

Background .bg-* classes can be used with all theme colors as well as white and transparent. These classes do not affect any text color, so use the .text-* classes for that.

<div class="p-3 text-white bg-primary">.bg-primary</div>
<div class="p-3 text-white bg-beets">.bg-beets</div>

Background gradient

By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.

<div class="p-3 bg-gradient bg-primary text-white">.bg-primary</div>
<div class="p-3 bg-gradient bg-beets text-white">.bg-beets</div>

Custom theme colors Beets Exclusive

You can create up to three custom theme colors by altering the scss file _beets-variables.scss.

Find the part below. It is pretty much in the beginning of the file. Set your colors by altering the variables $custom-color-{1|2|3} and $custom-color-{1|2|3}-name and compile the scss file.

// CUSTOM COLORS
// start

$custom-color-1-name:   "bubblegum";
$custom-color-1:        #d63384;

$custom-color-2-name:   "autumn";
$custom-color-2:        #fd7e14;

$custom-color-3-name:   "spring";
$custom-color-3:        #20c997;

$beets-custom-theme-colors: (
  $custom-color-1-name: $custom-color-1,
  $custom-color-2-name: $custom-color-2,
  $custom-color-3-name: $custom-color-3
);

// CUSTOM COLORS
// end

You can now use your custom colors like any other contextual color above.

For this example we created the theme colors bubblegum, autumn and spring.

<div class="bg-bubblegum text-white p-3">.bg-bubblegum</div>
<div class="bg-autumn text-white p-3">.bg-autumn</div>
<div class="bg-spring text-white p-3">.bg-spring</div>

<button class="btn btn-bubblegum">bubblegum</button>
<button class="btn btn-alt-autumn">autumn</button>
<button class="btn btn-ghost-spring">spring</button>
<button class="btn btn-outline-bubblegum">bubblegum</button>

<div class="spinner-border text-bubblegum"></div>
<div class="spinner-border text-autumn"></div>
<div class="spinner-border text-spring"></div>
<div class="spinner-grow text-bubblegum"></div>
<div class="spinner-grow text-autumn"></div>
<div class="spinner-grow text-spring"></div>	

<p class="text-bubblegum">This is a text styled with bubblegum.</p>
<p class="text-autumn">This is a text styled with autumn.</p>
<p class="text-spring">This is a text styled with spring.</p>

<p><a href="#" class="link-bubblegum">This is a link styled with bubblegum.</a></p>
<p><a href="#" class="link-autumn">This is a link styled with autumn.</a></p>
<p><a href="#" class="link-spring">This is a link styled with spring.</a></p>

<div class="alert alert-bubblegum">An alert with you custom color bubblegum</div>
<div class="alert alert-autumn">An alert with you custom color autumn</div>
<div class="alert alert-spring">An alert with you custom color spring</div>