Colors

This color palette has been agreed upon by the OpenBMC community and differs from the Bootstrap color patterns. The OpenBMC palette includes custom hex values, along with additional blue, green, red, and yellow color variables used as accent colors for components. The .scss component files use these accent colors to override default styles set by the Bootstrap library.

• Learn more about theme customization
• Open an issue in the OpenBMC webui-vue repo (opens new window) to request a change
• Learn more about Bootstrap colors (opens new window)

Grays

Color variable:

$gray-100

Hex:

#f4f4f4

Color variable:

$gray-200

Hex:

#e6e6e6

Color variable:

$gray-300

Hex:

#d8d8d8

Color variable:

$gray-400

Hex:

#cccccc

Color variable:

$gray-500

Hex:

#b3b3b3

Color variable:

$gray-600

Hex:

#999999

Color variable:

$gray-700

Hex:

#666666

Color variable:

$gray-800

Hex:

#3f3f3f

Color variable:

$gray-900

Hex:

#161616

Blues

Color variable:

$blue-500

Hex:

#2d60e5

Greens

Color variable:

$green-500

Hex:

#0a7d06

Reds

Color variable:

$red-500

Hex:

#da1416

Yellows

Color variable:

$yellow-500

Hex:

#efc100

All Colors

All Colors is the term Bootstrap uses to describe the colors that make up the colors map. These colors and the Grays color variables define the theme-colors map colors.

Learn more about the Bootstrap color maps (opens new window).

Variable:

$blue

Color Variable:

$blue-500

Variable:

$green

Color Variable:

$green-500

Variable:

$red

Color Variable:

$red-500

Variable:

$yellow

Color Variable:

$yellow-500

Theme Colors

The theme colors are keys in the theme-colors map. Bootstrap-Vue has a variant prop that accepts any of the theme-colors keys to set the theme of a component.

Learn more about the Bootstrap theme-colors maps (opens new window).

Color variable:

$primary

Color variable:

$blue

Color variable:

$secondary

Color variable:

$gray-800

Color variable:

$light

Color variable:

$gray-100

Color variable:

$dark

Color variable:

$gray-900

Color variable:

$info

Color variable:

$blue

Color variable:

$success

Color variable:

$green

Color variable:

$warning

Color variable:

$yellow

Color variable:

$danger

Color variable:

$red