> For the complete documentation index, see [llms.txt](https://docs.verge.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.verge.io/run-the-platform/fr/administration-systeme/themes.md). # Fonctionnalités de thème VergeOS VergeOS fournit un système de thème complet qui permet aux administrateurs de personnaliser l’apparence visuelle de l’interface utilisateur. La fonctionnalité de thème offre un contrôle granulaire sur les couleurs à travers différents composants de l’interface, notamment les graphiques, les éléments de navigation, les en-têtes, les chargeurs et les éléments généraux de l’interface. ## Vue d'ensemble Le système de thèmes de VergeOS permet aux organisations de créer des thèmes visuels personnalisés qui modifient les couleurs de l’interface et les éléments de marque. Cette fonctionnalité va au-delà du simple branding de l’interface utilisateur en offrant un contrôle détaillé sur des groupes spécifiques de composants UI, permettant une personnalisation visuelle complète qui peut s’aligner sur l’identité visuelle de l’entreprise ou améliorer l’expérience utilisateur. ## Ce que vous apprendrez Ce guide explique la fonctionnalité de thèmes de VergeOS, notamment où accéder aux fonctions de thème, quelles options de personnalisation sont disponibles et comment les différents composants du thème fonctionnent ensemble pour créer une apparence d’interface cohérente. Vous comprendrez : * Où trouver la gestion des thèmes dans VergeOS * Quels groupes de propriétés de thème sont disponibles à la personnalisation * Comment fonctionnent la création et la gestion des thèmes * Quels formats de fichiers et quels éléments sont pris en charge * Comment les thèmes s’intègrent au système de branding UI existant ## Exigences **Configuration de l’environnement :** * Accès administrateur (permissions d’admin de cluster ou d’admin de locataire) **Connaissances préalables :** * Navigation de base dans VergeOS et accès aux paramètres système ## Estimation du temps **Temps d’exploration :** 10 à 15 minutes pour comprendre toutes les options et fonctionnalités de thème ## Accéder à la gestion des thèmes ### Chemin de navigation Le système de thèmes se trouve dans les paramètres système de VergeOS, accessibles via l’interface d’administration. 1. **Accéder aux paramètres système**: Accédez à **Système** > **Paramètres** pour accéder à la zone de configuration du système 2. **Emplacement de la gestion des thèmes**: * Dans le menu de navigation de gauche des Paramètres système, vous trouverez **Thèmes** comme section dédiée * La zone Thèmes affiche les thèmes existants sous forme de tableau avec les colonnes Nom, Description et Date de modification ### Interface de gestion des thèmes La page Paramètres système affiche les thèmes existants dans la **Thèmes** section, en affichant : * **Nom**: L’identifiant du thème (par exemple « light ») * **Description**: La description du thème (par exemple « paquet de thème clair pour Verge.io ») * **Modifié**: Date et heure de dernière modification ## Création et gestion des thèmes ### Création de nouveaux thèmes **Accès au nouveau thème**: Cliquez sur **Nouveau thème** dans le menu de navigation de gauche pour accéder à l’interface de création de thème. **Composants de l’interface de création de thème**: #### Configuration de base du thème * **Champ Nom**: Champ obligatoire pour l’identification du thème * **Champ Description**: Texte descriptif facultatif pour la documentation du thème * **Interrupteur d’activation**: Active ou désactive le thème * **Liste déroulante Basé sur**: Choisissez entre « thème système clair » ou « thème système sombre » comme base #### Groupes de propriétés de couleur La section Couleurs organise les éléments personnalisables de l’interface en groupes logiques : **Graphiques**: * Six propriétés de couleur de graphique individuelles (Graphique 1-6) * Chaque propriété contrôle les couleurs des différentes séries de données dans les graphiques et les visualisations * Comprend un sélecteur de couleur, une saisie de valeur hexadécimale, un curseur d’opacité et une fonction de réinitialisation individuelle **Chargeur**: * **Propriété du chargeur**: Contrôle l’apparence de l’indicateur de chargement principal * **Suiveur du chargeur**: Configure les couleurs des éléments animés de chargement * Aperçu en temps réel des animations de chargement **Navigation de gauche**: * **Arrière-plan**: Couleur d’arrière-plan du panneau de navigation * **Texte**: Couleur standard du texte de navigation * **Survol**: Couleur d’arrière-plan pour les états de survol * **Texte au survol**: Couleur du texte lors des interactions de survol * **Texte désactivé**: Couleur des éléments de navigation inactifs **En-tête**: * **Arrière-plan**: Arrière-plan de la barre d’en-tête principale * **Bouton actif**: Mise en évidence du bouton actif * **Texte du bouton**: Couleur standard du texte des boutons * **Texte au survol du bouton**: Couleur du texte lors du survol du bouton * **Arrière-plan de la barre de navigation**: Couleur de la zone de navigation du sous-en-tête **Général**: * **Arrière-plan**: Arrière-plan global de l’application * **Arrière-plan de la carte**: Arrière-plan des composants de type carte * **Bordure de la carte**: Couleurs des bordures des panneaux et des cartes * **Texte**: Couleur du texte principal dans toute l’interface #### Gestion des ressources **Options de logo personnalisé**: * **Logo personnalisé (grand)**: Images de 144x36 pixels pour l’affichage du logo standard * **Logo personnalisé (petit)**: Images de 44x44 pixels pour les zones compactes * Formats pris en charge : JPG, PNG, SVG **Favicon personnalisé**: * Prise en charge du format de fichier ICO pour la personnalisation de l’onglet du navigateur * Liens vers la section Fichiers pour la gestion du téléversement des ressources #### Outils de personnalisation des couleurs **Contrôles individuels des propriétés**: * **Sélecteur de couleur**: Interface visuelle de sélection des couleurs * **Saisie de valeur hexadécimale**: Saisie directe du code couleur hexadécimal * **Curseur d’opacité**: Contrôle de la transparence pour chaque propriété de couleur * **Bouton de réinitialisation**: Réinitialisation individuelle d’une propriété aux valeurs par défaut * **Réinitialisation globale**: Lien « Réinitialiser » pour restaurer toutes les propriétés d’un groupe #### Fonctionnalité d’aperçu **Aperçu en temps réel**: * **Section d’aperçu**: Affiche une représentation en direct des changements de thème * **Aperçus sensibles au contexte**: Visualisations différentes selon le groupe de propriétés sélectionné * **Éléments interactifs**: L’aperçu inclut les états de survol et les composants interactifs ## Explication des groupes de propriétés du thème ### Groupe de propriétés des graphiques Contrôle la palette de couleurs des graphiques, diagrammes et visualisations de données dans tout VergeOS. Chaque propriété Graphique (1-6) représente les couleurs de différentes séries de données, permettant une image de marque cohérente pour la visualisation des données sur les tableaux de bord et les interfaces de rapports. ### Groupe de propriétés du chargeur Gère l’apparence des indicateurs de chargement et des éléments de progression. La propriété Chargeur contrôle la couleur principale du spinner ou de la barre de progression, tandis que Suiveur du chargeur gère les éléments animés dans les interfaces de chargement. ### Groupe de propriétés de la navigation de gauche Personnalise le panneau de navigation principal qui apparaît sur le côté gauche de l’interface VergeOS. Les propriétés contrôlent les couleurs d’arrière-plan, les couleurs du texte et les états interactifs afin de garantir que la navigation reste fonctionnelle et visuellement cohérente. ### Groupe de propriétés de l’en-tête Gère la barre d’en-tête supérieure et ses composants, notamment les boutons, les éléments de navigation et les couleurs d’arrière-plan. Ces paramètres affectent l’en-tête principal de l’interface qui contient la navigation système et les commandes utilisateur. ### Groupe de propriétés générales Contrôle les éléments fondamentaux de l’interface, notamment les arrière-plans globaux, les composants de type carte, les bordures et les couleurs du texte principal. Ces propriétés établissent l’apparence visuelle de base sur laquelle les autres composants s’appuient. ## Intégration avec l’image de marque existante ### Intégration des ressources Les logos et favicons personnalisés téléversés via le système de thèmes s’intègrent aux jeux de couleurs pour offrir une personnalisation visuelle complète. Les ressources conservent leur qualité et leur positionnement tout en s’adaptant à la palette de couleurs choisie. ## Application et gestion des thèmes ### Activation du thème Les thèmes sont appliqués immédiatement lors de l’enregistrement avec le bouton Soumettre. L’interrupteur Activé permet de créer et de stocker des thèmes sans activation immédiate. ### Hiérarchie des thèmes Dans les environnements multitenants, les thèmes s’appliquent au niveau du locataire actuel et sont hérités vers les niveaux inférieurs, sauf substitution. Cela permet une image de marque cohérente à travers les hiérarchies organisationnelles tout en autorisant la personnalisation lorsque nécessaire. ### Persistance du thème Les paramètres de thème sont stockés dans la configuration système de VergeOS et persistent à travers les mises à jour et les redémarrages du système. Les configurations de thème peuvent être exportées et importées dans le cadre des processus de sauvegarde et de restauration du système. ## Formats de fichiers et spécifications pris en charge ### Exigences relatives au logo * **Grand logo**: 144x36 pixels, formats JPG/PNG/SVG * **Petit logo**: 44x44 pixels, formats JPG/PNG/SVG * Recommandations sur la taille des fichiers : moins de 1 Mo pour des performances optimales ### Spécifications du favicon * **Format**: Format de fichier ICO requis * **Tailles recommandées**: 16x16, 32x32, 48x48 pixels dans un seul fichier ICO * Prise en charge de secours du format PNG dans les navigateurs modernes ### Prise en charge des formats de couleur * **Valeurs hexadécimales**: Codes de couleur hexadécimaux standard à 6 chiffres (#RRGGBB) * **Opacité**: Transparence basée sur un pourcentage (0-100 %) * **Sélecteur de couleur**: Interface visuelle de sélection RGB/HSV * **Fonctionnalité de réinitialisation**: Retour immédiat aux valeurs par défaut du système La fonctionnalité de thèmes de VergeOS offre des capacités complètes de personnalisation visuelle qui permettent aux organisations de créer des interfaces cohérentes et personnalisées tout en maintenant des normes d’utilisabilité et d’accessibilité sur l’ensemble de leur plateforme de virtualisation. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.verge.io/run-the-platform/fr/administration-systeme/themes.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.