# 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](/customization/theme/)
- [Open an issue in the OpenBMC webui-vue
  repo](https://github.com/openbmc/webui-vue/issues/new/choose) to request a
  change
- [Learn more about Bootstrap
  colors](https://getbootstrap.com/docs/4.4/getting-started/theming/#theme-colors)

## Grays
<colors-grays/>

## Blues
<colors-blues/>

## Greens
<colors-greens/>

## Reds
<colors-reds/>

## Yellows
<colors-yellows/>

## 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](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors).
<colors-all/>

## 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](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors).

<colors-theme/>