--- title: "Comment changer les couleurs de votre app GoodBarber" description: "Dans GoodBarber, chaque couleur de votre thème tient un rôle. Sur l'une de nos apps, changer une seule couleur a repeint 95 réglages, sans ouvrir d'écran." canonical_url: "https://fr.goodbarber.com/blog/comment-changer-les-couleurs-de-mon-app-a1481/" lang: fr date: 2026-10-22 last_updated: 2026-10-22 --- # Comment changer les couleurs de mon app ? Dans une app GoodBarber, vous n'avez pas à colorer les éléments un par un. Chaque couleur de votre thème tient un rôle (le texte, l'accent, le fond des cellules) et tout ce qui porte ce rôle prend sa teinte, sur toutes vos pages. Changez une couleur, l'app entière suit. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://fr.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer 22 oct. 2026 · 6 min de lecture ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98459048-68663914.jpg?v=1792668939.834143) Voici le rôle de chaque couleur, comment les changer pour toute l'app, et comment donner sa propre couleur à un seul élément. ## Les couleurs de toute l'app dans un seul panneau Dans le back-office GoodBarber, le panneau **Mon app › Style de l'app › Couleurs** réunit les vingt réglages de couleur de votre app. En haut, les « Thèmes de couleurs ». Dessous, le « Header », quatre « Couleurs principales », deux « Couleurs secondaires », puis les zones de l'app, le « Fond de l'app », le menu, le « Séparateur de liste » et les boutons. Vous ne choisissez pas ces couleurs écran par écran. Chacune tient un rôle, et les titres, les bordures ou les pastilles de date qui portent ce rôle la prennent sur toutes vos pages. Vous la réglez une fois, et elle se propage dans toute l'app. C'est notre principe « Set once, consistent everywhere », au cœur de la fondation [Couleur](https://fr.goodbarber.com/uxdesign/color/) du Design System GoodBarber. Choisir les teintes elles-mêmes est une autre question, traitée dans [un article et cinq outils](https://fr.goodbarber.com/blog/5-outils-gratuits-pour-trouver-les-meilleures-couleurs-pour-votre-application-mobile-a1098/). Ici, nous regardons comment l'app les porte. ## Un rôle par couleur ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98459048-68663916.jpg?v=1792668941.2541413) Dans le panneau Couleurs, les quatre « Couleurs principales » puis les deux « Couleurs secondaires » ont chacune un rôle, le même dans toute l'app. Les voici dans l'ordre du panneau, comme sur l'image. 1. **Le texte principal**, les titres et le texte des articles. 2. **L'accent**, l'information sous le titre, l'adresse d'un événement, l'icône d'une action sélectionnée. 3. **Le texte secondaire**, l'information au-dessus du titre (date, catégorie), les auteurs, le lien vers la liste complète. 4. **Le fond des surfaces**, les cellules et les en-têtes de widget. 5. **Les bordures**, autour des cellules. 6. **Le fond secondaire**, celui d'un widget quand vous lui en donnez un. Dans une app GoodBarber, une couleur a donc une fonction, pas une place. Si votre accent est bleu, tout ce qui porte l'accent devient bleu, d'un écran à l'autre. Et quand vous changez de teinte, le texte reste du texte, le fond reste du fond. Les zones de l'app, le « Header », le menu, les boutons, ont leurs propres réglages, dans le même panneau. Le jaune des pastilles de date, le 7 sur l'image, vient ainsi des « Autres boutons ». ## Réglez vos couleurs dans GoodBarber [Animation de 21,6 s dans le panneau Couleurs (back-office en anglais) : le thème « Ondas Locales », puis la carte « Eastside », App background passé en Lake Blue, Apply et sa confirmation, puis le panneau du widget Room change, fond de cellule en jaune](https://player.vimeo.com/video/1238304470?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Tout se passe dans le panneau **Couleurs**, en trois gestes, du plus large au plus fin. 1. **Choisissez un thème.** Le carrousel des « Thèmes de couleurs » en propose des dizaines, dont les [thèmes Classic](https://fr.goodbarber.com/blog/de-nouveaux-themes-classic-pour-lancer-votre-app-plus-vite-a1422/) parus cet été. Un thème pose d'un coup les vingt réglages du panneau. La « Palette magique » peut aussi en composer un pour vous, et le bouton « Créer un thème de couleur » enregistre le vôtre, qui rejoint le carrousel. Dans la vidéo, c'est le thème « Eastside » de l'école de musique. 2. **Changez une couleur.** Cliquez sur une couleur, saisissez son code hexadécimal, puis « Choisir ». L'aperçu suit aussitôt. 3. **Appliquez.** Le bouton « Appliquer » repeint l'app entière, après une confirmation. Tous les éléments prennent les couleurs du thème, sur toutes vos pages. « Style de l'app » regroupe aussi les panneaux **Polices**, **Boutons** et **Champs de formulaire**, qui règlent de la même façon toute l'app d'un seul endroit. Pour un seul élément, ouvrez le panneau de design de sa section ou de son widget. Ses couleurs y sont préremplies par le thème, et vous pouvez en changer une pour cette liste seulement. C'est la fin de la vidéo, où la cellule « Room change » passe au jaune. L'extension gratuite **Édition avancée** et son bouton { EDITION } vont plus loin, avec la couleur de chaque élément [écrite en hexadécimal](https://fr.goodbarber.com/uxdesign/atom-color/), comme pour [l'ombre](https://fr.goodbarber.com/blog/comment-regler-l-ombre-dans-mon-app-a1462/) et [les bordures](https://fr.goodbarber.com/blog/comment-regler-les-bordures-dans-mon-app-a1472/). Le panneau Couleurs, lui, reste le niveau de toute l'app, et « Appliquer » y ramène chaque élément à la couleur de son rôle. Réglez donc votre thème en premier, vos détails ensuite. ## Avant, après : une seule couleur change, et tout ce qui la porte suit ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98459048-68663918.jpg?v=1792668942.9541397) Voici deux fois le même écran, et une seule couleur a changé entre les deux, l'accent. À gauche, il a la couleur du texte, et tout se lit au même niveau. À droite, il passe au bleu de la marque, et avec lui l'information sous le titre de la notice et l'adresse de chaque répétition, avec son icône. L'œil trouve aussitôt ce qui est utile. Ni les titres, ni les fonds, ni les polices n'ont bougé. Un seul réglage porte loin. Sur l'une de nos apps GoodBarber, changer la couleur du texte principal a repeint 95 réglages d'un coup, dans toute l'app, sans ouvrir un seul écran. C'est notre principe « No design burden », pour que la cohérence ne soit jamais à votre charge. Pour juger votre réglage, regardez l'aperçu avant d'appliquer, puis parcourez deux ou trois pages. Si l'accent saute aux yeux là où il ne devrait pas, c'est sans doute l'élément qui le porte qu'il faut retoucher, dans son panneau de design. ## Quatre façons de tenir la couleur d'accent ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98459048-68663919.jpg?v=1792668944.3701384) Ces quatre apps utilisent les mêmes rôles, et pourtant elles ne se ressemblent pas. La différence tient aux réglages où chacune met sa couleur. - **Eastside Music Workshop** met son bleu dans l'accent, qui colore ici l'adresse d'une répétition, et son jaune dans les « Autres boutons », qui colorent les pastilles de date. - **Blandas Astronomy Club** met son ambre dans les réglages de sa barre d'onglets, et ici seul l'onglet en cours s'allume. - **Unit 7** pose son vert fluo en fond de l'onglet actif, un aplat avec son nom écrit dessus. - **Tweed & Cheviot** met son rouge dans l'accent, mais n'affiche l'information sous le titre que là où elle compte, ici le chiffre à retenir. À vous de choisir où mettre la vôtre. Demandez-vous ce qu'elle doit dire, ce qui est actif, ce qui est nouveau, ce qui attend un geste. ## Mon réglage préféré : jamais de blanc pur, jamais de noir pur ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98459048-68663920.jpg?v=1792668945.7101371) Mon réglage préféré ne se remarque pas. Pour le fond des surfaces, je ne mets jamais #FFFFFF, mais un blanc légèrement teinté, #FFF8ED chez Eastside, posé sur un « Fond de l'app » un cran plus sombre, #EDE7DD. Les cellules se détachent sans ombre, et l'écran prend une matière, comme du papier. Pour le texte principal, jamais #000000 non plus, mais un presque-noir coloré, #23252B ici. Le noir pur sur du blanc donne le contraste maximal, 21:1, que je trouve dur sur une longue lecture. #23252B sur #FFF8ED garde 14,5:1, le double du niveau le plus exigeant des WCAG (7:1), avec la douceur en plus. Trois valeurs, et toute l'app y gagne, les titres, les textes, les cellules. C'est ce que permet le rôle, régler une fois, pour partout. **Les couleurs en bref** - Dans une app GoodBarber, les couleurs de toute l'app se règlent dans un seul panneau, vingt réglages dont six couleurs qui portent chacune un rôle. - Une couleur a une fonction, pas une place, le texte principal, l'accent, le texte secondaire, le fond des surfaces, les bordures, le fond secondaire. - Tout se règle dans le panneau Couleurs, un thème, la Palette magique ou une seule couleur, puis « Appliquer », qui repeint l'app entière. - Un élément se retouche dans le panneau de sa section ou de son widget, ou clé par clé avec l'extension gratuite Édition avancée. - Réglez le thème en premier, les détails ensuite. - Deux réglages de designer, jamais de blanc pur pour les surfaces, jamais de noir pur pour le texte. ## À vous Ouvrez **Mon app › Style de l'app › Couleurs**, cliquez sur la couleur de votre accent et essayez une autre teinte dans l'aperçu. Rien n'est appliqué tant que vous ne cliquez pas sur « Appliquer ». Pas encore d'app ? [Créez la vôtre](https://fr.goodbarber.com/create/) avec GoodBarber, le Mobile App Builder. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) À propos de l'auteur Marie-Pierre Jeffard UI Designer Je suis UI Designer chez GoodBarber. Design system des apps, composants, layouts, site, illustrations, animations : tout ce que je fais tourne autour de l'interface. Ce qui me plaît dans notre produit, c'est d'inventer des règles universelles, qui tiennent sur tous les écrans et accueillent toutes les identités visuelles. L'app devient un écrin pour votre contenu. J'aime ce qui a l'air simple, et tout le travail invisible qu'il faut pour y arriver : les règles, les choix et les contraintes qui font qu'une interface tient debout. C'est ce que je raconte ici. [Voir tous ses articles](https://fr.goodbarber.com/blog/author/marie-pierre-jeffard/)[LinkedIn](https://www.linkedin.com/in/marie-pierre-jeffard/)