Aller au contenu principal

Thème du Modal

Le Thème de Personnalisation vous permet d'ajuster l'apparence de l'interface en fonction de vos préférences. Vous pouvez modifier les couleurs, les animations, les polices, et bien plus pour créer une expérience utilisateur unique.

Personnalisation du Thème​

Le fichier theme.json est utilisé pour personnaliser divers aspects du thème, tels que les couleurs, les animations et les polices. Vous pouvez ajuster les paramètres suivants pour adapter l'interface à vos besoins.

1. Couleurs​

Vous pouvez personnaliser les couleurs du thème avec les options suivantes :

  • backgroundColor : La couleur de fond principale de l'interface (ex : "#121212").
  • inputColor : La couleur de fond des champs de saisie (ex : "#222222").
  • inputTextColor : La couleur du texte dans les champs de saisie (ex : "white").
  • color : La couleur principale utilisée pour les éléments de l'interface (ex : "#faad2c").

2. Animations​

Les animations permettent de créer des effets visuels lors de l'entrée et de la sortie des éléments de l'interface. Voici les animations disponibles dans le fichier theme.json :

Animations d'Entrée​

  • fadeIn : L'élément apparaît en augmentant son opacité de 0 à 1.
  • slideInHorizontal : L'élément glisse horizontalement de la gauche vers sa position initiale.

Animations de Sortie​

  • fadeOut : L'élément disparaît en diminuant son opacité de 1 à 0.
  • slideOutHorizontal : L'élément glisse horizontalement vers la gauche en sortant de la vue.

Exemple d'Animation d'Entrée et de Sortie​

"animations": {
  "entry": "fadeIn",
  "exit": "fadeOut"
}

3. Polices​

Le Thème de Personnalisation utilise des polices spécifiées via Google Fonts. Vous pouvez personnaliser les polices utilisées dans l'interface avec les options suivantes :

  • title : La police utilisée pour les titres.
  • names : La police utilisée pour les noms ou autres éléments similaires.
  • descriptions : La police utilisée pour les descriptions ou explications.
  • inputsContent : La police utilisée pour le contenu des champs de saisie.

Exemple d'utilisation d'une police depuis Google Fonts :

"title": "https://fonts.googleapis.com/css2?family=Lexend:wght@900&display=swap"

4. Rayon des Coins​

Le Thème de Personnalisation vous permet de définir le rayon des coins des éléments avec l'option borderRadius. Une valeur de 0.5 donnera des coins légèrement arrondis.

Exemple de theme.json pour le Thème de Personnalisation​

{
  "backgroundColor": "#121212",
  "inputColor": "#222222",
  "inputTextColor": "white",
  "color": "#faad2c",
  "borderRadius": 0.5,
  "animations": {
    "entry": "fadeIn",
    "exit": "fadeOut"
  },
  "fonts": {
    "title": "https://fonts.googleapis.com/css2?family=Lexend:wght@900&display=swap",
    "names": "https://fonts.googleapis.com/css2?family=Lexend:wght@500&display=swap",
    "descriptions": "https://fonts.googleapis.com/css2?family=Lexend:wght@200&display=swap",
    "inputsContent": "https://fonts.googleapis.com/css2?family=Lexend:wght@300&display=swap"
  }
}

Résumé​

Le Thème du Modal vous permet d'ajuster l'apparence et le comportement des éléments de l'interface. Vous pouvez modifier les couleurs, choisir des animations, et personnaliser les polices afin d'offrir une expérience utilisateur fluide et agréable.

Information complémentaire​

Partagez vos thèmes personnalisés dans notre Serveur Discord Support pour permettre à d'autres utilisateurs de les découvrir et les adopter. Devenez créateur de thème et gagnez l'appréciation de la communauté !