Colors

blue

$blue: #0d6efd;

--bs-blue

#0d6efd !default

Default
Default
Default
Default

Informs:

  • $link-color:
    • --bs-link-color
    • --bs-link-color-rgb
indigo

$indigo: #6610f2;

--bs-indigo

#6610f2 !default

Default
Default
Default
Default
purple

$purple: #6f42c1;

--bs-purple

#6f42c1 !default

Default
Default
Default
Default
pink

$pink: #d63384;

--bs-pink

#d63384 !default

Default
Default
Default
Default
red

$red: #dc3545;

--bs-red

#dc3545 !default

Default
Default
Default
Default

Informs: $danger

orange

$orange: #fd7e14;

--bs-orange

#fd7e14 !default

Default
Default
Default
Default
yellow

$yellow: #ffc107;

--bs-yellow

#ffc107 !default

Default
Default
Default
Default

Informs: $warning

green

$green: #198754;

--bs-green

#198754 !default

Default
Default
Default
Default

Informs: $success

teal

$teal: #20c997;

--bs-teal

#20c997 !default

Default
Default
Default
Default
cyan

$cyan: #0dcaf0;

--bs-cyan

#0dcaf0 !default

Default
Default
Default
Default

Informs: $info

black

$black: #000000;

--bs-black

--bs-black-rgb

#000000 !default

Default
Default
Default
Default

Informs: --bs-body-emphasis,--bs-body-emphasis-rgb

white

$white: #ffffff;

--bs-white

--bs-white-rgb

#ffffff !default

Default
Default
Default
Default

Informs: $body-bg, --bs-body-bg, --bs-body-bg-rgb

gray

$gray: $gray-600;

--bs-gray

#6c757d !default

Default
Default
Default
Default

Note: defined in SCSS colors-map

gray-dark

$gray-dark: $gray-800;

--bs-gray-dark

#343a40 !default

#343a40
Default
#343a40
Default

Note: defined in SCSS colors-map

gray-100

$gray-100: #eff2f5;

--bs-gray-100

#f8f9fa !default

#eff2f5
Default
#eff2f5
Default

Informs: $danger

gray-200

$gray-200: #cfd9e2;

--bs-gray-200

#e9ecef !default

#cfd9e2
Default
#cfd9e2
Default

Informs: $body-secondary-bg

gray-300

$gray-300: #dee2e6;

--bs-gray-300

#dee2e6 !default

Default
Default
Default
Default

Informs: $border-color

gray-400

$gray-400: #ced4da;

--bs-gray-400

#ced4da !default

Default
Default
Default
Default

Informs: $body-color-dark

gray-500

$gray-500: #adb5bd;

--bs-gray-500

#adb5bd !default

Default
Default
Default
Default

Informs: $body-color-dark

gray-600

$gray-600: #6c757d;

--bs-gray-600

#6c757d !default

#6c757d
Default
#6c757d
Default

Informs: $gray, $secondary

gray-700

$gray-700: #1f2c33;

--bs-gray-700

#495057 !default

#1f2c33
Default
#1f2c33
Default
gray-800

$gray-800: #192429;

--bs-gray-800

#343a40 !default

#192429
Default
#192429
Default

Informs: $gray-dark

gray-900

$gray-900: #171a1c;

--bs-gray-900

#212529 !default

#171a1c
Default
#171a1c
Default

Informs:

  • $dark
  • $body-color:
    • --bs-body-color
    • --bs-body-color-rgb
  • $body-secondary-color: ($body-color, .75) !default;
    • --bs-secondary-color
    • --bs-secondary-color-rgb

primary

$primary: $teal;

--bs-primary

--bs-primary-rgb

$blue !default

#20c997
Default
#20c997
Default
secondary

$secondary: $gray-600;

--bs-secondary

--bs-secondary-rgb

#6c757d !default

Default
Default
Default
Default
success

$success: $green;

--bs-success

--bs-success-rgb

#198754 !default

Default
Default
Default
Default
info

$info: $cyan;

--bs-info

--bs-info-rgb

#0dcaf0 !default

Default
Default
Default
Default
warning

$warning: $yellow;

--bs-warning

--bs-warning-rgb

#ffc107 !default

Default
Default
Default
Default
danger

$danger: $red;

--bs-danger

--bs-danger

#dc3545 !default

Default
Default
Default
Default
light

$light: $gray-100;

--bs-light-rgb

--bs-light

#f8f9fa !default

#eff2f5
Default
#192429
Default

Note: dark mode overrides:

  • --bs-light: #192429;
  • --bs-light-rgb: 25, 36, 41;
dark

$dark: $gray-900;

--bs-dark-rgb

--bs-dark

#212529 !default

#212529
Default
#212529
Default