This table is from https://getbootstrap.com/docs/5.3/customize/color/ and can be used to test these colors in each theme and color mode.
Description | Swatch | Variables |
---|---|---|
Body — Default foreground (color) and background, including components. |
|
|
|
||
Secondary — Use the |
|
|
|
||
Tertiary — Use the |
|
|
|
||
Emphasis — For higher contrast text. Not applicable for backgrounds. |
|
|
Border — For component borders, dividers, and rules. Use |
|
|
Primary — Main theme color, used for hyperlinks, focus styles, and component and form active states. |
|
|
|
||
|
||
Text
|
|
|
Success — Theme color used for positive or successful actions and information. |
|
|
|
||
|
||
Text
|
|
|
Danger — Theme color used for errors and dangerous actions. |
|
|
|
||
|
||
Text
|
|
|
Warning — Theme color used for non-destructive warning messages. |
|
|
|
||
|
||
Text
|
|
|
Info — Theme color used for neutral and informative content. |
|
|
|
||
|
||
Text
|
|
|
Light — Additional theme option for less contrasting colors. |
|
|
|
||
|
||
Text
|
|
|
Dark — Additional theme option for higher contrasting colors. |
|
|
|
||
|
||
Text
|
|