Les class de couleurs sont composées de 3 variables :
--primary_color : Définit la couleur principale/primaire du composant.
--secondary_color : Définit la couleur secondaire du composant.
--font_color : Définit la couleur de la police d'écriture
Les couleurs proposées par la librairie ne vous plaisent pas ?
Pas de problème, appliquez vos propres couleurs, quelque soit l'élément souhaité !
Pour cela il suffit de modifier les variables dans le css du composant en question :
Vous souhaitez inverser la couleur primaire et secondaire ?
Pas de problème, rajoutez juste un R majuscule devant le nom de la couleur souhaité.
(Fonctionne seulement avec les couleurs de la librairie)
hsl(235, 80%, 60%)
#4755eb
rgb(71, 85, 235)
hsl(235, 60%, 50%)
#3340cc
rgb(51, 64, 204)
hsl(0, 80%, 60%)
#eb4747
rgb(235, 71, 71)
hsl(0, 60%, 50%)
#cc3333
rgb(204, 51, 51)
hsl(130, 60%, 60%)
#5cd670
rgb(92, 214, 112)
hsl(130, 70%, 50%)
#26d944
rgb(38, 217, 68)
hsl(0, 0%, 75%)
#bfbfbf
rgb(191, 191, 191)
hsl(0, 0%, 60%)
#999999
rgb(153, 153, 153)
hsl(0, 0%, 30%)
#4d4d4d
rgb(77, 77, 77)
hsl(0, 0%, 20%)
#333333
rgb(51, 51, 51)
hsl(270, 80%, 60%)
#9947eb
rgb(153, 71, 235)
hsl(270, 60%, 50%)
#7f33cc
rgb(127, 51, 204)
hsl(200, 90%, 60%)
#3db8f5
rgb(61, 184, 245)
hsl(200, 70%, 50%)
#269dd9
rgb(38, 157, 217)
hsl(30, 100%, 60%)
#ff9933
rgb(255, 153, 51)
hsl(30, 100%, 50%)
#ff8000
rgb(255, 128, 0)
hsl(10, 80%, 40%)
#b83014
rgb(184, 48, 20)
hsl(10, 100%, 30%)
#991900
rgb(153, 25, 0)
hsl(50, 80%, 50%)
#e6c419
rgb(230, 196, 25)
hsl(50, 80%, 40%)
#b89c14
rgb(184, 156, 20)
hsl(200, 20%, 50%)
#668899
rgb(102, 136, 153)
hsl(200, 20%, 60%)
#85a0ad
rgb(133, 160, 173)
hsl(340, 80%, 60%)
#eb477e
rgb(235, 71, 126)
hsl(340, 70%, 50%)
#d92662
rgb(217, 38, 98)
hsl(30, 100%, 40%)
#cc6600
rgb(204, 102, 0)
hsl(30, 100%, 30%)
#994c00
rgb(153, 76, 0)
hsl(120, 80%, 40%)
#14b814
rgb(20, 184, 20)
hsl(120, 80%, 30%)
#0f8a0f
rgb(15, 138, 15)
hsl(270, 20%, 50%)
#7f6699
rgb(127, 102, 153)
hsl(270, 20%, 40%)
#66527a
rgb(102, 82, 122)
hsl(0, 0%, 100%)
#ffffff
rgb(255, 255, 255)
hsl(0, 0%, 80%)
#cccccc
rgb(204, 204, 204)