Couleur

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.

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.

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,
  "black":      $black,
  "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.

Génération d'utilitaires

Bootstrap n'inclut pas d' colorutilitaires background-colorpour chaque variable de couleur, mais vous pouvez les générer vous-même avec notre API utilitaire et nos cartes Sass étendues ajoutées dans la v5.1.0.

1. Pour commencer, assurez-vous d'avoir importé nos fonctions, variables, mixins et utilitaires.
2. Utilisez notre map-merge-multiple()fonction pour fusionner rapidement plusieurs cartes Sass dans une nouvelle carte.
3. Fusionnez cette nouvelle carte combinée pour étendre tout utilitaire avec un {color}-{level}nom de classe.

Voici un exemple qui génère des utilitaires de couleur de texte (par exemple, .text-purple-500) en utilisant les étapes ci-dessus.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Cela générera de nouveaux .text-{color}-{level}utilitaires pour chaque couleur et chaque niveau. Vous pouvez faire de même pour tout autre service public et propriété.