Couleurs

Options

Classe Description
.{colorName} Définir une couleur à l'élément.
.child{ColorName} Définir une couleur aux enfant direct d'un élément.
.bg{ColorName} Définir une couleur d'arrière plan à l'élément.
.childBg{ColorName} Définir une couleur d'arrière plan aux enfant direct d'un élément.
.bd{ColorName} Définir une couleur de bordure d'un élément.
.childBd{ColorName} Définir une couleur de bordure aux enfant direct d'un élément.
.darkenHover
.lightenHover
Modifier l'opacité de l'arrière plan au survol de l'élément.
Utilisé par défault sur les boutons.

Ajouter un couleur

Ajouter les classes précédentes à votre couleurs personalisées dans le fichier css du site internet.

Il est recommandé de nommer les couleurs personnalisées par un terme générique (color1, primaryColor..) pour changer facilement de couleur au site.

<style>
    .color1,
    .childColor1 > * {
        color: #2196F3 !important;
    }
    .bgColor1,
    .childBgColor1 > * {
        background-color: #2196F3 !important;
    }
    .bdColor1,
    .childBdColor1 > * {
        border-color: #2196F3 !important;
    }
</style>

Définir un thème

Ajouter l'attribut data-color sur la balise html permet de définir la couleur par défault de la page.
Cette couleur sera appliquée sur certains éléments comme les sliders.

Couleurs disponibles

redLight

red

redDark

pinkLight

pink

pinkDark

purpleLight

purple

purpleDark

indigoLight

indigo

indigoDark

blueLight

blue

blueDark

greenLight

green

greenDark

yellowLight

yellow

yellowDark

orangeLight

orange

orangeDark

Success

Warning

Danger

white

gray1

gray2

gray3

gray4

gray5

gray6

gray7

gray8

gray9

black

light

dark

transparent

Darken / lighten

.lightenHover

.darkenHover