Aller au contenu principal

Thème du ContextUI

Le ContextUI de zUI permet de personnaliser l'apparence des éléments de l'interface en fonction du contexte. Vous pouvez ajuster les couleurs, les animations, et les styles pour créer une expérience utilisateur cohérente et interactive.

Personnalisation du ContextUI​

Le fichier theme.json vous permet de configurer plusieurs aspects du ContextUI, notamment les couleurs, les animations, les polices, et les autres options d'affichage. Vous pouvez ajuster les paramètres suivants pour personnaliser l'interface selon vos préférences.

1. Couleurs​

Vous pouvez personnaliser les couleurs du ContextUI avec les options suivantes :

  • background : La couleur de fond du ContextUI (ex : "rgba(18, 18, 18, 0.5)").
  • item : La couleur des éléments du ContextUI (ex : "#faad2c").

2. Animations​

Le ContextUI peut comporter des animations pour son entrée et sa sortie. Voici les animations disponibles dans le fichier theme.json :

Animations d'Entrée​

  • fadeIn : Fait apparaître l'élément en augmentant son opacité de 0 à 1.
  • popIn : Fait apparaître l'élément avec un effet de zoom, passant d'un état de scale de 0 à 1.

Animations de Sortie​

  • fadeOut : Fait disparaître l'élément en diminuant son opacité de 1 à 0.
  • popOut : Fait disparaître l'élément avec un effet de zoom, passant d'un état de scale de 1 à 0.

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

"animations": {
  "entry": "popIn",
  "exit": "popOut"
}

3. Polices​

Le ContextUI utilise plusieurs polices, toutes spécifiées via l'API Google Fonts. Voici les options de polices que vous pouvez personnaliser :

  • title : La police pour les titres.
  • subtitle : La police pour les sous-titres.
  • description : La police pour les descriptions des éléments.
  • counter : La police pour les compteurs.
  • itemTitle : La police pour les titres des éléments.
  • itemRightLabel : La police pour les labels des éléments.

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

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

4. Coins Arrondis​

Vous pouvez définir le rayon des coins du ContextUI avec l'option cornersRadius. Une valeur de 0.5 donne des coins légèrement arrondis.

5. Padding​

Vous pouvez activer ou désactiver l'espace intérieur des éléments du ContextUI avec l'option padding :

  • "true" : Ajoute de l'espace autour des éléments.
  • "false" : Aucune marge autour des éléments.

6. Éléments du ContextUI​

Vous pouvez personnaliser les éléments du ContextUI avec les paramètres suivants :

  • hoverStyle : Le style à appliquer lors du survol des éléments (par exemple, "complete").
  • hoverColor : La couleur des éléments lors du survol (par exemple, "#FAAD2C").
  • lineIsRounded : Définissez sur true pour des bordures arrondies sur les éléments du ContextUI.

Exemple de theme.json pour le ContextUI​

{
  "colors": {
    "background": "rgba(18, 18, 18, 0.5)",
    "item": "#faad2c"
  },
  "animations": {
    "entry": "popIn",
    "exit": "popOut"
  },
  "fonts": {
    "title": "https://fonts.googleapis.com/css2?family=Doto:wght@900&display=swap",
    "subtitle": "https://fonts.googleapis.com/css2?family=Lexend:wght@300&display=swap",
    "description": "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@700&display=swap",
    "counter": "https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@400&display=swap",
    "itemTitle": "https://fonts.googleapis.com/css2?family=Lexend:wght@500&display=swap",
    "itemRightLabel": "https://fonts.googleapis.com/css2?family=Lexend:wght@200&display=swap"
  },
  "cornersRadius": 0.5,
  "padding": false,
  "items": {
    "hoverStyle": "complete",
    "hoverColor": "#FAAD2C",
    "lineIsRounded": true
  }
}

Résumé​

Le ContextUI vous permet de personnaliser l'apparence et le comportement des éléments contextuels dans zUI. Vous pouvez ajuster des paramètres comme les couleurs, les animations, les polices (via Google Fonts), et les bordures arrondies pour créer une interface optimale et engageante.

Information complémentaire​

N'oubliez pas de partager votre thème personnalisé dans notre Serveur Discord Support pour permettre à d'autres utilisateurs de l'adopter. Devenez créateur de thème et gagnez l'appréciation de la communauté !