Guide des couleurs

Découvrez la palette de couleurs et les styles du site

Guide des couleurs

Couleurs principales

primary

bg-primary text-primary-foreground

secondary

bg-secondary text-secondary-foreground

accent

bg-accent text-accent-foreground

Couleurs LGBT spécifiques

lgbtPurple

bg-lgbtPurple text-white

lgbtPink

bg-lgbtPink text-white

lgbtOrange

bg-lgbtOrange text-white

lgbtBlue

bg-lgbtBlue text-white

Interface du site

bg-dark

bg-bg-dark text-text-light

surface

bg-surface text-text-light

blue

bg-blue text-blue-foreground

Exemples de composants

Card

Contenu d'une carte avec style card de base.

Surface

Contenu avec le style surface personnalisé.

Dégradés

from-lgbtPurple to-lgbtPink

from-primary to-blue

Comment utiliser

Ce guide illustre le nouveau système de couleurs HSL avec support du mode sombre. Les couleurs sont définies dans globals.css en tant que variables CSS et configurées dans tailwind.config.js.

Exemples d'utilisation

// Utiliser une couleur de base
<div className="bg-primary text-primary-foreground">
  Contenu avec couleur primaire
</div>

// Utiliser une couleur personnalisée
<button className="bg-lgbtPurple text-white">
  Bouton violet LGBT
</button>

// Hover et états différents
<button className="bg-secondary hover:bg-secondary/90">
  Bouton secondaire
</button>

// Dégradé
<div className="bg-gradient-to-r from-lgbtPurple to-lgbtPink">
  Dégradé violet à rose
</div>

Le basculement entre le mode clair et sombre est facilité par l'ajout de la classe 'dark' à l'élément HTML racine.