Ajouter un thème couleur à Bootstrap 4

Découvrez comment rapidement ajouter une couleur au thème couleur de Bootstrap avec le fichier variables.scss

Posté le par Benoît Philibert|3467 vues

On se contente souvent de modifier la palette de couleur déjà existante et proposer par défaut avec Bootstrap. Généralement, le framework fait les choses correctement et vous n’aurez pas forcément besoin d’ajouter une couleur ou un état particuliers.

Cependant, il est toujours bon de savoir customiser votre feuille de style CSS en fonction de vos besoins. 

Débuter avec les fichiers sources

Bien entendu, il est possible d’ajouter une nouvelle couleur au thème couleur par simple addition de styles CSS dans votre feuille de style. Néanmoins, il vous faudra utiliser la version source de Bootstrap pour faire les choses proprement. Cette version source propose les différents fichiers SCSS qui, une fois compilés, génèrent la version CSS de votre feuille de style. 

Le fichier variables.scss

Bootstrap dispose d’un fichier regroupant les variables utilisées dans les différents fichiers SCSS. Ces variables permettent de dynamiser et d’automatiser les fichiers. Lorsque vous faites une modifications de style d’une variable, cette dernière s’applique à toutes les classes CSS qui utilisent la variable. En langage SASS, une variable se déclare avec un $ comme par exemple $maVariable

Le fichier comporte plus de 900 lignes et fait le tour de tous les composants et autres grille et « utilities » du framework. Vous trouverez dans les premières lignes de code (bien entendu ces dernières servent à styliser bon nombre d’autres variables et styles utilisés dans Bootstrap), les couleurs ainsi que le thème couleur déclaré par Bootstrap.

Code couleurs

Le code couleur permet de définir les variables de couleurs de base utilisées dans votre style CSS.

$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;

$colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$colors: map-merge(
  (
    "blue":       $blue,
    "indigo":     $indigo,
    "pink":       $pink,
    "red":        $red,
    "orange":     $orange,
    "yellow":     $yellow,
    "green":      $green,
    "teal":       $teal,
    "cyan":       $cyan,
    "white":      $white,
    "gray":       $gray-600,
    "gray-dark":  $gray-800
  ),
  $colors
);

Thème couleurs

Le thème couleur permet de définir les variables utilisées dans les components comme les boutons, les alertes, etc…

$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-800 !default;

$theme-colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark,
  ),
  $theme-colors
);

Ajouter sa couleur personnalisée

Dans un premier temps, nous allons récupérer le code hexadécimal de notre couleur personnalisée pour pouvoir la définir avant le « map-merging ». On partira sur un violet #9D33F3 appelé purple. Après avoir déclaré la variable et son code hexadécimal, il ne nous reste plus qu’à définir son nom de classe entre guillemets et sa valeur qui n’est autre que la variable précédemment déclarée.

$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;
$purple:  #9D33F3 !default; // couleur personnalisée

$colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$colors: map-merge(
  (
    "blue":       $blue,
    "indigo":     $indigo,
    "pink":       $pink,
    "red":        $red,
    "orange":     $orange,
    "yellow":     $yellow,
    "green":      $green,
    "teal":       $teal,
    "cyan":       $cyan,
    "white":      $white,
    "gray":       $gray-600,
    "gray-dark":  $gray-800,
    "purple":     $purple // couleur personnalisée
  ),
  $colors
);

Ajouter un thème couleur personnalisé

Si vous avez suivi l’étape du la couleur personnalisé, alors rien de plus simple pour le thème couleur : c’est le même fonctionnement.

$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-800 !default;
$purple:        $purple !default; // thème couleur personnalisée

$theme-colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark,
    "purple":     $purple // thème couleur personnalisée
  ),
  $theme-colors
);

Quelle différence entre code couleur et thème couleur ?

Le thème couleur est utilisé par Bootstrap comme une mise en forme contextuelle. Lorsqu’on utilise un thème couleur comme par exemple danger, il s’agit de stigmatiser un contexte d’alerte critique, une erreur, etc.
Même si l’utilisation des codes couleurs peut s’avérer dans un premier temps similaire à cette idée, leurs utilisations sont plus graphiques que contextuelles. Comme par exemple la présence par défaut des couleurs whitegray-dark, cyan, etc…


Ces articles pourraient vous intéresser

Tags

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.