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.
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.scss
fichier 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.scss
le 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-interval
variable, qui spécifie une valeur de pourcentage échelonnée pour chaque couleur mélangée que nous produisons. Voir les fichiers scss/_functions.scss
et scss/_variables.scss
pour 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.
$colors
répertorie toutes nos500
couleurs de base ( ) disponibles$theme-colors
répertorie toutes les couleurs de thème nommées sémantiquement (voir ci-dessous)$grays
ré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 $colors
carte 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-color
utiliser les 500
valeurs de couleur.
Génération d'utilitaires
Ajouté dans v5.1.0
Bootstrap n'inclut pas d' color
utilitaires background-color
pour 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.
- Pour commencer, assurez-vous d'avoir importé nos fonctions, variables, mixins et utilitaires.
- Utilisez notre
map-merge-multiple()
fonction pour fusionner rapidement plusieurs cartes Sass dans une nouvelle carte. - 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/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é.