Colors

Color systems that creates theme styles and components. This enables more comprehensive customization and extension for any project.

Theme colors

When using colors, we use primary color as color accent of the brand, usually come from brand logo.

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

All these colors are available as a Sass map, $theme-colors.

          
  $theme-colors: (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  );

Gray colors

Gray colors are also important to denote content priority and how much attention we expect from the user to certain content, such as text color, area backgound.

$gray-0
$gray-100
$gray-200
$gray-300
$gray-400
$gray-500
$gray-600
$gray-700
$gray-800
$gray-900
          
  $grays: (
    "0": $gray-0,
    "100": $gray-100,
    "200": $gray-200,
    "300": $gray-300,
    "400": $gray-400,
    "500": $gray-500,
    "600": $gray-600,
    "700": $gray-700,
    "800": $gray-800,
    "900": $gray-900
  ) !default;

Color utilities

You can use background utility classes to get variation of colors based on existing colors for example by changing the opacity and adding the gradient.

This is default primary background
This is 75% opacity primary background
This is 50% opacity primary background
This is 25% opacity primary background
This is 10% opacity primary background

An example of utility class to create gradient

.bg-primary.bg-gradient
On this page