Couleur

Bootstrap est pris en charge par un système de couleurs étendu qui thématise nos styles et nos composants. Cela permet une personnalisation et une extension plus complètes pour tout projet.

Sur cette page

Couleurs du thème

Nous utilisons un sous-ensemble de toutes les couleurs pour créer une palette de couleurs plus petite pour générer des schémas de couleurs, également disponibles sous forme de variables Sass et d'une carte Sass dans le scss/_variables.scssfichier Bootstrap.

Primaire

Secondaire

Succès

Danger

Avertissement

Info

Lumière

Sombre

Toutes ces couleurs sont disponibles sous forme de carte Sass, $theme-colors.

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

Consultez nos documents sur les cartes et les boucles Sass pour savoir comment modifier ces couleurs.

Toutes les couleurs

Toutes les couleurs Bootstrap sont disponibles sous forme de variables Sass et d'une carte Sass dans scss/_variables.scssle fichier. Pour éviter d'augmenter la taille des fichiers, nous ne créons pas de classes de texte ou de couleur d'arrière-plan pour chacune de ces variables. Au lieu de cela, nous choisissons un sous-ensemble de ces couleurs pour une palette de thèmes .

Assurez-vous de surveiller les rapports de contraste lorsque vous personnalisez les couleurs. Comme indiqué ci-dessous, nous avons ajouté trois rapports de contraste à chacune des couleurs principales : un pour les couleurs actuelles de l'échantillon, un pour le blanc et un pour le noir.

$bleu#0d6efd

$bleu-100

$bleu-200

$bleu-300

$bleu-400

$ bleu-500

$bleu-600

$bleu-700

$bleu-800

$bleu-900

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$ violet#6f42c1

$ violet-100

$ violet-200

$ violet-300

$ violet-400

$ violet-500

$ violet-600

$ violet-700

$ violet-800

$ violet-900

$ rose#d63384

$ rose-100

$ rose-200

$ rose-300

$ rose-400

$ rose-500

$ rose-600

$ rose-700

$ rose-800

$ rose-900

$rouge#dc3545

$rouge-100

$rouge-200

$rouge-300

$rouge-400

$rouge-500

$rouge-600

$rouge-700

$rouge-800

$rouge-900

$orange#fd7e14

$orange-100

$orange-200

$orange-300

$orange-400

$orange-500

$orange-600

$orange-700

$orange-800

$orange-900

$jaune#ffc107

$jaune-100

$jaune-200

$jaune-300

$jaune-400

$jaune-500

$jaune-600

$jaune-700

$jaune-800

$jaune-900

$vert#198754

$vert-100

$vert-200

$vert-300

$vert-400

$vert-500

$vert-600

$vert-700

$vert-800

$vert-900

$ sarcelle#20c997

$ sarcelle-100

$ sarcelle-200

$ sarcelle-300

$ sarcelle-400

$ sarcelle-500

$ sarcelle-600

$ sarcelle-700

$ sarcelle-800

$ sarcelle-900

$cyan#0dcaf0

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$ gris-500#adb5bd

$ gris-100

$ gris-200

$ gris-300

$ gris-400

$ gris-500

$ gris-600

$ gris-700

$ gris-800

$ gris-900

$noir#000

$blanc#fff

Remarques sur Sass

Sass ne peut pas générer de variables par programme, nous avons donc créé manuellement des variables pour chaque teinte et nuance nous-mêmes. Nous spécifions la valeur médiane (par exemple, $blue-500) et utilisons des fonctions de couleur personnalisées pour teinter (éclaircir) ou ombrer (assombrir) nos couleurs via la mix()fonction de couleur de Sass.

Utiliser mix()n'est pas la même chose que lighten()et darken()— le premier mélange la couleur spécifiée avec du blanc ou du noir, tandis que le second ajuste uniquement la valeur de luminosité de chaque couleur. Le résultat est une suite de couleurs beaucoup plus complète, comme le montre cette démo CodePen .

Nos fonctions tint-color()et shade-color()utilisent mix()à côté de notre $theme-color-intervalvariable, qui spécifie une valeur de pourcentage échelonnée pour chaque couleur mélangée que nous produisons. Voir les fichiers scss/_functions.scsset scss/_variables.scsspour le code source complet.

Cartes Sass en couleur

Les fichiers source Sass de Bootstrap incluent trois cartes pour vous aider à parcourir rapidement et facilement une liste de couleurs et leurs valeurs hexadécimales.

$colorsrépertorie toutes nos 500couleurs de base ( ) disponibles
$theme-colorsrépertorie toutes les couleurs de thème nommées sémantiquement (voir ci-dessous)
$graysrépertorie toutes les teintes et nuances de gris

Dans scss/_variables.scss, vous trouverez les variables de couleur de Bootstrap et la carte Sass. Voici un exemple de la $colorscarte Sass :

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Ajoutez, supprimez ou modifiez des valeurs dans la carte pour mettre à jour leur utilisation dans de nombreux autres composants. Malheureusement, à l'heure actuelle, tous les composants n'utilisent pas cette carte Sass. Les futures mises à jour s'efforceront d'améliorer cela. Jusque-là, prévoyez d'utiliser les ${color}variables et cette carte Sass.

Exemple

Voici comment vous pouvez les utiliser dans votre Sass :

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Des classes utilitaires de couleur et d' arrièrecolor -plan sont également disponibles pour définir et background-colorutiliser les 500valeurs de couleur.