Color ^spécifique

Bootstrap inclut une mécanique de gestion des couleurs à laquelle il convient d'ajouter certains ajustements.
Il est intéressant de "neutraliser" certaines variables de couleurs et de prévoir certaines variables d'usage.
Les couleurs peuvent être rangées dans plusieurs sections : niveau de gris, gammes de couleurs, thèmes et usages.

Les couleurs définies sont disponibles sous forme de variables scss ($lipsum) et de variables css (var(--lipsum)). A noter que Bootstrap a prévu le préfixe bs- lors de déclarations de variables css.

A noter qu'un fichier projet/_colors.scss a été créé afin d'y regrouper les déclarations anciennement dans le fichier de _variables.scss ainsi que tous les ajustements nécessaires à la gestion du projet.
Pour les besoins de création de cette documentation, de nombreuses couleurs (variations de 100 à 900) ont été déclinées en variable css.

Les sections Branding et Custom sont des ajouts personnalisés au framework.

Les couleurs de branding correspondent à la charte du projet. L'idée est de regrouper les couleurs de la marque afin de les réutiliser dans la mécanique Bootstrap.
Les couleurs peuvent être indiquées de façon brute ou bien provenir des palettes de couleurs elles-mêmes réajustées pour coller à l'identité de la marque.
A noter également que les couleurs disposent de variations light(-l) et dark(-d).

Une fois ces variables définies, on les injecte dans les variables du framework en fonction des besoins.

#??????

#??????

#??????

#??????

#??????

#??????

#??????

#??????

#??????

Toutes les couleurs sont disponibles sous forme de variable Sass.
Chaque couleur de base (valeur médiane correspondant à l'indice -500) est déclinée sous différents niveaux de contraste (mix avec du noir ou du blanc) afin de constituer une palette (valeur de 100 à 900).
La variable $colors liste toutes les couleurs (500) de base disponibles.

#000

#fff

#f8f9fa

#e9ecef

#dee2e6

#ced4da

#adb5bd

#6c757d

#495057

#343a40

#212529

#0d6efd

#6610f2

#6f42c1

#d63384

#dc3545

#fd7e14

#ffc107

#198754

#20c997

#0dcaf0

$gray-600

$gray-800

#CFE2FE

#9EC5FE

#6EA8FD

#3E8BFD

$blue

#0C58CA

#084298

#062C65

#031632

#E1CFFC

#C19FF9

#A36FF7

#8540F4

$indigo

#510DC1

#3D0991

#290661

#140330

#E2D9F2

#C6B4E6

#A98DDA

#8C68CD

$purple

#59349A

#422874

#2D1B4D

#160E27

#F7D6E6

#EEAECE

#E785B5

#DE5C9D

$pink

#AB286A

#801E4F

#561535

#2B091B

#F8D7DA

#F1AEB4

#EA8690

#E35D6A

$red

#B02A37

#842129

#57161B

#2D0B0D

#FFE5D0

#FFCCA1

#FEB272

#FD9843

$orange

#CB6510

#984C0D

#653308

#321A04

#FFF3CE

#FFE69C

#FFDA6A

#FFCD38

$yellow

#CC9A07

#997403

#664D03

#332601

#D2E7DD

#A3CFBB

#74B799

#479F77

$green

#19A179

#0F5133

#0C3621

#051B10

#D2F4EA

#A6E9D5

#7ADFC0

#4CD3AB

$teal

#19A179

#12795A

#0C503D

#06281E

#CFF4FC

#9EEAF9

#6EDFF6

#3DD5F3

$cyan

#09A1C0

#067990

#045060

#032830

$blue-100: tint-color($blue, 80%) !default;
$blue-200: tint-color($blue, 60%) !default;
$blue-300: tint-color($blue, 40%) !default;
$blue-400: tint-color($blue, 20%) !default;
$blue-500: $blue !default;
$blue-600: shade-color($blue, 20%) !default;
$blue-700: shade-color($blue, 40%) !default;
$blue-800: shade-color($blue, 60%) !default;
$blue-900: shade-color($blue, 80%) !default;

$blues: (
  "blue-100": $blue-100,
  "blue-200": $blue-200,
  "blue-300": $blue-300,
  "blue-400": $blue-400,
  "blue-500": $blue-500,
  "blue-600": $blue-600,
  "blue-700": $blue-700,
  "blue-800": $blue-800,
  "blue-900": $blue-900
) !default;

:root {
  @each $color, $value in $blues {
    --#{$color}: #{$value};
  }
}

Il s'agit de couleurs thématiques de la librairie Bootstrap qui seront réutilisées dans de nombreux composants du framework.

Pour chaque thème, certaines déclinaisons d'usage (bg, border, etc...) ont été prévues :

• *-rgb
• *-bg-subtle
• *-border-subtle
• *-text-emphasis

$blue

$gray-600

$green

$cyan

$yellow

$red

$gray-100

$gray-900

$blue

$primary

$blue-100

$blue-200

$blue-800

$gray-600

$secondary

#E2E3E5

#C4C8CB

#2B2F32

$green

$success

$green-100

$green-200

$green-800

$cyan

$info

$cyan-100

$cyan-200

$cyan-800

$yellow

$warning

$yellow-100

$yellow-200

$yellow-800

$red

$danger

$red-100

$red-200

$red-800

$gray-100

$light

#FCFCFD

$gray-200

$gray-700

$gray-900

$dark

$gray-400

$gray-500

$gray-700

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-900 !default;

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

:root {
  @each $color, $value in $theme-colors {
    --#{$prefix}#{$color}: #{$value};
  }
}

$primary-bg-subtle:       tint-color($primary, 80%) !default;
$secondary-bg-subtle:     tint-color($secondary, 80%) !default;
$success-bg-subtle:       tint-color($success, 80%) !default;
$info-bg-subtle:          tint-color($info, 80%) !default;
$warning-bg-subtle:       tint-color($warning, 80%) !default;
$danger-bg-subtle:        tint-color($danger, 80%) !default;
$light-bg-subtle:         mix($gray-100, $white) !default;
$dark-bg-subtle:          $gray-400 !default;

$primary-border-subtle:   tint-color($primary, 60%) !default;
$secondary-border-subtle: tint-color($secondary, 60%) !default;
$success-border-subtle:   tint-color($success, 60%) !default;
$info-border-subtle:      tint-color($info, 60%) !default;
$warning-border-subtle:   tint-color($warning, 60%) !default;
$danger-border-subtle:    tint-color($danger, 60%) !default;
$light-border-subtle:     $gray-200 !default;
$dark-border-subtle:      $gray-500 !default;

$primary-text-emphasis:   shade-color($primary, 60%) !default;
$secondary-text-emphasis: shade-color($secondary, 60%) !default;
$success-text-emphasis:   shade-color($success, 60%) !default;
$info-text-emphasis:      shade-color($info, 60%) !default;
$warning-text-emphasis:   shade-color($warning, 60%) !default;
$danger-text-emphasis:    shade-color($danger, 60%) !default;
$light-text-emphasis:     $gray-700 !default;
$dark-text-emphasis:      $gray-700 !default;

Des couleurs d'usage ont été définies dans Bootstrap depuis la version 5.3.
Version instable et confusion possible avec l'utilisation du terme secondary alors que déjà présent dans les thèmes principaux du framework.
Toutes les couleurs sont disponibles en version rgb également.
Le suffixe *-color exprime la couleur de texte alors que *-bg exprime un usage de couleur de background.

$gray-900

rgba(33, 37, 41, 0.75)

$gray-200

rgba(33, 37, 41, 0.5)

$gray-100

$black

$gray-300

lipsum

Le principe d'utilisation d'un mode sombre consiste à déclarer des variables css en fonction du contexte (caractérisé généralement par la présence d'une classe ou d'un attribut au niveau de la balise html) et d'avoir un rendu final qui diffère en fonction du contexte.
Par défaut, nous sommes en mode clair.
Bootstrap utilise un attribut data-bs-theme pouvant prendre comme valeur light ou dark. Il peut être mis sur la balise html mais également sur n'importe quel composant.

<div data-bs-theme="dark">
    ...
</div>

:root, [data-bs-theme=light] {
    --monBg: #fff;
    --monTxt: #000;  
}
[data-bs-theme=dark] {
    --monBg: #000;
    --monTxt: #fff; 
}
div {
    background:var(--monBg);
    color:var(--monTxt);
}

Dans le fichier de _variables.scss, il est possible de commenter l'inclusion du fichier variables-dark.
À noter l'existance de nombreuses fonctionnalités complémentaires dans Bootstrap : En savoir plus