# 6. ONGLET "COULEURS"

# Couleurs

[![x1.png](https://wiki.infras.fr/uploads/images/gallery/2026-07/scaled-1680-/QFj4R96TdMkDGPFI-x1.png)](https://wiki.infras.fr/uploads/images/gallery/2026-07/scaled-1680-/QFj4R96TdMkDGPFI-x1.png)

#### **« Thèmes »**

Cette section propose plusieurs thèmes prédéfinis pour modifier rapidement l’apparence de l’interface. Chaque thème applique un ensemble de couleurs cohérent pour les menus et autres éléments visuels.

- **Oblyon Green** (thème vert)
- **Oblyon Dark** (thème sombre)
- **Oblyon Blue** (thème bleu)
- **Oblyon Night** (thème noir et gris)
- **Oblyon Light** (thème clair avec du blanc et du rouge)

#### **« Menu Haut »**

Cette section permet de personnaliser les couleurs du menu situé en haut de l’écran. Vous pouvez modifier :

- La couleur de fond du menu et du survol
- La couleur au survol
- La couleur du texte et de son état actif (lorsqu’un élément est sélectionné).

<p class="callout info">*Si l'option « inverser le menu haut/gauche » est active, ces libellés deviennent ceux du menu gauche, la structure restant identique.*</p>

#### **« Menu Gauche »**

Cette section permet d’adapter les couleurs du menu latéral gauche. Comme pour le menu du haut, vous pouvez ajuster :

- La couleur de fond et du survol
- La couleur du texte et son état actif

Ces réglages permettent d’assurer une bonne lisibilité et d’harmoniser les couleurs en fonction de vos préférences ou de votre charte graphique.

#### **« Boutons »**

Cette section gère l'apparence des boutons d'action et des boutons dits **« dangereux »** (suppression, annulation). Deux couleurs de dégradé sont proposées pour chaque type, plus une couleur de texte pour les boutons d'action, afin de bien distinguer visuellement une action normale d'une action destructrice.

[![x2.png](https://wiki.infras.fr/uploads/images/gallery/2026-07/scaled-1680-/ZQAmg9gyelPZ0Asd-x2.png)](https://wiki.infras.fr/uploads/images/gallery/2026-07/scaled-1680-/ZQAmg9gyelPZ0Asd-x2.png)

#### **« Messages »**

Regroupe les couleurs des bandeaux d'alerte inline (information, avertissement, erreur) ainsi que celles des notifications système (toasts) correspondantes.

Pour chaque niveau (info/warning/error), vous réglez séparément :

- La couleur de bordure
- La couleur de fond et de texte du bandeau
- La couleur de fond et de texte de la notification associée — permet de renforcer visuellement la gravité d'un message.

#### **« Fonds généraux »**

**Couleurs de fond globales de l'interface :** couleur principale (accent du thème), fond général de la page, fond des champs de saisie (avec une variante si l'option **« fond gris sur les champs »** est activée), fond de la zone du logo et fond de la page de connexion.

#### **« Texte »**

Couleur du texte de base affiché dans le corps des pages, et couleur des liens hypertextes — les deux couleurs héritées du thème Eldy sous-jacent.

#### **« Titres »**

Couleurs des différents éléments de titre :

- - - Fond des barres de titre
        - Texte du titre principal
        - Texte des titres dans les tableaux et hors tableaux,
        - Bordure supérieure des titres, et fond des filtres inactifs des widgets statistiques.

[![x3.png](https://wiki.infras.fr/uploads/images/gallery/2026-07/scaled-1680-/S2yyoYgVPpDCwgdl-x3.png)](https://wiki.infras.fr/uploads/images/gallery/2026-07/scaled-1680-/S2yyoYgVPpDCwgdl-x3.png)

#### **« Onglets »**

Couleur de fond de l'onglet actif d'une fiche, et couleur du texte de cet onglet actif — permet de bien repérer l'onglet en cours de consultation.

#### **« Lignes des tableaux »**

Ensemble des couleurs des lignes de tableaux :

- - Fond et texte par défaut
    - Fond au survol
    - Fond des lignes cochées
    - Texte au survol, deux teintes de dégradé pour les lignes paires et deux pour les lignes impaires, et couleur des traits de séparation entre lignes.

#### **« Lignes de total »**

Couleur de fond et de texte de la ligne de total en pied de tableau (factures, commandes…), utilisée uniquement si l'option **« identique à l'entête »** est désactivée.

#### **« Sélecteur de date »**

Couleur de mise en évidence du jour courant et couleur du jour sélectionné dans le widget calendrier (jscalendar).

#### **« Natures des tiers »**

Couleurs de fond des étiquettes de nature affichées sur les fiches tiers (prospect, client, fournisseur, utilisateur interne), plus une couleur de texte commune à ces étiquettes.

#### **« Adhérents »**

Couleurs de fond des étiquettes adhérents (personne morale / personne physique) et couleur de texte commune à ces deux étiquettes, pour le module Adhérents.

#### **« Tableau de bord / colonnes »**

Couleur d'ombre portée des petites boîtes du Dashboard (si l'option est activée), deux couleurs de dégradé pour le fond des cartes kanban actives (applications/modules), et couleur de bordure de la colonne **« action »** figée des tableaux (visible uniquement si une colonne d'action sticky est activée).

[![x4.png](https://wiki.infras.fr/uploads/images/gallery/2026-07/scaled-1680-/1kTgirf2CmA4kwmD-x4.png)](https://wiki.infras.fr/uploads/images/gallery/2026-07/scaled-1680-/1kTgirf2CmA4kwmD-x4.png)

#### **« Montants »**

Couleurs distinctes pour le montant restant à payer, le montant payé/soldé, et les liens marqués comme impayés — permet un repérage visuel rapide de l'état de paiement.

#### **« Statuts (widgets) »**

Cinq couleurs de badge de statut (succès, information, avertissement, danger, primaire), plus la couleur de la barre de progression et celle des éléments de timeline.

#### **« Météo / vignettes »**

Cinq niveaux de couleur pour l'indicateur **« météo »** du tableau de bord (du plus faible au plus fort niveau d'activité), et couleur du badge signalant qu'une mise à jour est disponible.

#### **« Autocomplétions »**

Couleur de fond et couleur de texte de la ligne mise en surbrillance lors d'une recherche avec auto-complétions (ex. sélection de produit ou de tiers).

#### **« Multi-sélection (tags, catégories…) »**

***Deux paires fond/texte à ne pas confondre :*** Les catégories déjà cochées dans la liste déroulante de proposition, et les étiquettes déjà sélectionnées affichées directement dans le champ de saisie une fois validées.

***Ratio du filtre d'inversion des couleurs :*** Curseur (0 à 100) appliquant un filtre CSS d'inversion partielle sur les icônes basées sur des images PNG — utile pour adapter des icônes claires à un thème sombre (le preset « Dark » le règle par exemple à 80).