Une charte graphique cohérente sur les tableaux de bord, c'est possible directement dans DigDash grâce à l'éditeur de thèmes. Polices, couleurs, logos, navigation, CSS personnalisé : cet article passe en revue chaque section de l'éditeur, étape par étape, en prenant la charte DeciVision comme exemple concret.
Une charte graphique est l'ensemble des règles qui définissent l'identité visuelle d'une entreprise : son logo, ses couleurs, ses polices et la manière de les utiliser. Elle garantit que tous les supports de communication, qu'il s'agisse d'un site web, d'une plaquette commerciale ou d'une présentation, soient immédiatement reconnaissables et cohérents entre eux.
Les tableaux de bord ne font pas exception. Leur appliquer la charte graphique de l'entreprise permet de renforcer son identité visuelle et de donner une image professionnelle. Cela facilite aussi la lecture grâce à des codes couleurs cohérents d'un tableau de bord à l'autre. Enfin, les utilisateurs adoptent plus facilement un outil qui leur ressemble et dans lequel ils retrouvent leurs repères.
Dans DigDash, la mise en place d'une charte graphique passe par l'éditeur de thèmes. C'est un moyen rapide et simple pour intégrer une charte graphique. Tout se fait via une interface qui se paramètre facilement, avec l'affichage des résultats instantanément. Dans cet éditeur, on peut pratiquement tout faire : choix des couleurs, polices, logos, ou encore paramétrage de la page de connexion à la plateforme.
Dans cet article, nous allons passer en revue la plupart des personnalisations proposées par cet éditeur et réaliser pas à pas un thème, en prenant l'exemple de la charte graphique de DeciVision.
Accéder à l'éditeur de thèmes
Pour accéder à l'éditeur de thèmes, il faut être dans l'éditeur DigDash, puis ouvrir le menu en haut à droite et sélectionner Paramètres > Éditeur de thèmes.
Avec la version 2026R1, l'éditeur continue d'évoluer en ajoutant de nouveaux éléments paramétrables. Nous allons voir dans cet article les aspects de personnalisation suivants :
- Global (polices, bannière, arrière-plan, page d'authentification)
- Logos
- Navigation (menu horizontal et menu vertical)
- Objets (graphiques, filtres, légendes)
- Contenu (portail d'accès, objet rétractable)
- Autres (variables CSS)
- CSS additionnel
Polices, bannière et couleurs globales du thème DigDash
La personnalisation dans la section « Global » permet d'agir sur les polices globales du tableau de bord, la bannière ou la page d'authentification. Dans le cadre d'une charte graphique, cette partie joue un rôle essentiel : c'est elle qui définit l'identité visuelle générale de l'ensemble des tableaux de bord associés au thème.
Polices
Pour être fidèle à la charte graphique DeciVision, nous changeons la police en sélectionnant Helvetica. Cette police s'applique sur tout le tableau de bord qui utilise ce thème.
Bon à savoir
Si la police choisie n'est pas installée sur le poste de l'utilisateur, le navigateur la remplacera par une police de substitution, généralement Arial. Pour garantir le rendu, il est préférable de choisir une police disponible sur tous les postes, ou de la charger via le CSS additionnel.
Bannière
Pour la bannière, nous reprenons les couleurs du logo DeciVision : un dégradé de bleus allant du bleu nuit (#2D248F) au bleu lumineux (#6273F3). Le paramétrage natif n'accepte qu'une couleur unie. Nous verrons plus loin comment obtenir ce dégradé grâce au CSS additionnel.
Intégrer le logo de l'entreprise dans l'éditeur de thèmes DigDash
La section Logos permet d'intégrer n'importe quel logo d'entreprise dans le thème. L'import se fait simplement : les formats supportés sont le PNG et le SVG.
Dans notre cas, nous avons importé le logo DeciVision, ce qui personnalise immédiatement l'apparence du tableau de bord.
Personnaliser la navigation entre les pages du tableau de bord
La navigation dans DigDash pour passer d'une page à l'autre peut se faire verticalement ou horizontalement. Cet onglet permet de personnaliser tout l'aspect esthétique de la navigation entre les pages.
Personnalisation des graphiques, filtres et légendes
Les objets que l'on peut personnaliser dans le tableau de bord sont les différents graphiques, filtres, commentaires ou encore les légendes. Dans le cadre de la charte DeciVision, nous n'allons pas modifier ces éléments.
Couleurs et styles des boutons dans DigDash
La section Contenu regroupe le paramétrage de l'esthétique des éléments qui composent le tableau de bord. Nous nous intéressons ici surtout à la personnalisation des boutons : un fond bleu nuit (#28217D) et un texte orange (#FF9568), repris directement de la charte DeciVision.
Variables CSS personnalisées : centraliser les couleurs du thème
Cette section permet de déclarer des variables CSS réutilisables dans d'autres personnalisations du thème.
À retenir
C'est une bonne pratique pour une charte graphique : en déclarant une fois pour toutes les couleurs principales sous forme de variables, un changement de couleur n'est à faire qu'à un seul endroit, et se propage automatiquement dans tout le thème.
CSS additionnel : dégradés et personnalisations avancées dans DigDash
Le CSS additionnel permet d'aller plus loin dans la personnalisation, là où les options natives ne suffisent pas. Par exemple, il est possible d'appliquer un dégradé plutôt qu'une couleur unie sur la bannière et sur le menu vertical.
Bon à savoir
Le CSS additionnel s'appuie sur des classes internes de l'application, qui peuvent évoluer d'une version à l'autre. Il est donc recommandé de privilégier les paramètres natifs lorsque c'est possible, et de vérifier le rendu après chaque montée de version DigDash.
Résultat : la charte graphique DeciVision appliquée dans DigDash
Voici le résultat final, avec la charte graphique DeciVision appliquée sur un tableau de bord DigDash :
Pour aller plus loin : personnaliser les graphiques dans le Studio DigDash
L'éditeur de thèmes agit sur l'habillage du tableau de bord, mais pas sur les graphiques eux-mêmes. Pour les personnaliser, il faut se rendre dans le Studio, menu Gestionnaires, puis sélectionner Styles. On peut y créer un style qui s'appliquera aux différents graphiques ; il suffit ensuite de sélectionner ce style sur chaque graphique concerné.
Pourquoi l'éditeur de thèmes DigDash est le bon outil pour votre charte graphique
L'éditeur de thèmes DigDash est la meilleure façon de mettre en place une vraie charte graphique. Il permet d'avoir des tableaux de bord homogènes, avec les mêmes couleurs, les mêmes styles et la même identité visuelle partout. Au lieu de refaire les réglages à chaque dashboard, on les définit une seule fois et ils sont réutilisés partout.
C'est aussi un vrai gain de temps pour les équipes de développement et de maintenance : lorsqu'un élément graphique doit évoluer, il suffit de le modifier dans le thème plutôt que dans chaque rapport individuellement.
L'éditeur de thèmes apporte de la cohérence, facilite la maintenance et améliore l'expérience utilisateur. C'est un élément essentiel pour garantir le respect de la charte graphique dans l'ensemble des réalisations DigDash.
Un projet DigDash en cours ?
Nos consultants certifiés vous accompagnent sur la configuration, la personnalisation et la montée en compétence sur DigDash.
Questions fréquentes
Comment accéder à l'éditeur de thèmes dans DigDash ?
Dans l'éditeur DigDash, ouvrez le menu en haut à droite, puis sélectionnez Paramètres > Éditeur de thèmes. L'interface s'affiche avec toutes les sections disponibles : Global, Logos, Navigation, Objets, Contenu, Autres et CSS additionnel.
Quels éléments peut-on personnaliser avec l'éditeur de thèmes DigDash ?
L'éditeur de thèmes DigDash permet de personnaliser les polices globales, la bannière, la page d'authentification, les logos, la navigation (menu horizontal et vertical), les objets (graphiques, filtres, légendes) et les boutons. Un panneau CSS additionnel permet d'aller plus loin pour les personnalisations non couvertes par les options natives.
Comment appliquer un dégradé sur la bannière DigDash ?
Le paramétrage natif de la bannière ne supporte qu'une couleur unie. Pour appliquer un dégradé, il faut utiliser la section CSS additionnel de l'éditeur de thèmes et cibler la classe .navigationMenuLeft avec une propriété background: linear-gradient(...). Vérifiez le rendu après chaque montée de version DigDash, car ces classes internes peuvent évoluer.
Comment personnaliser les graphiques DigDash au-delà du thème ?
L'éditeur de thèmes agit sur l'habillage général du tableau de bord, mais pas sur les graphiques eux-mêmes. Pour personnaliser les graphiques, rendez-vous dans le Studio DigDash, menu Gestionnaires > Styles. Vous pouvez y créer un style de graphique et l'appliquer ensuite à chaque objet concerné.
Quel est l'avantage de déclarer des variables CSS dans l'éditeur de thèmes DigDash ?
En déclarant les couleurs principales sous forme de variables dans la section Autres, un changement de couleur n'est à effectuer qu'à un seul endroit dans le thème, et il se propage automatiquement partout où la variable est référencée. C'est une bonne pratique de maintenance qui réduit le risque d'incohérences visuelles lors d'une évolution de la charte.
