--- title: "Como mudar as cores da sua app GoodBarber" description: "No GoodBarber, cada uma das cores do seu tema tem o seu papel. Numa das nossas apps, mudar uma só cor repintou 95 definições, sem abrir um único ecrã." canonical_url: "https://pt.goodbarber.com/blog/como-mudar-as-cores-da-minha-app-a1381/" lang: pt date: 2026-10-22 last_updated: 2026-10-22 --- # Como mudar as cores da minha app? Numa app GoodBarber, não precisa de colorir os elementos um a um. Cada cor do seu tema tem um papel (o texto, o destaque, o fundo das células) e tudo o que tem esse papel ganha o seu tom, em todas as suas páginas. Mude uma cor, e a app inteira acompanha. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://pt.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer 22 de out. de 2026 · 6 min de leitura ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98459063-68663970.jpg?v=1792669103.4981146) Eis o papel de cada cor, como mudá-las para toda a app e como dar a um só elemento a sua própria cor. ## As cores de toda a app num só painel No back office do GoodBarber, o painel **A minha app › Estilo da app › Cores** reúne as vinte definições de cor da sua app. Em cima, os «Temas de cores». Por baixo, o «Cabeçalho», quatro «Cores primárias», duas «Cores secundárias» e depois as zonas da app, o «Fundo da app», o menu, o «Separador de lista» e os botões. Não escolhe estas cores ecrã a ecrã. Cada uma tem um papel, e os títulos, as bordas ou as pastilhas de data que têm esse papel ganham-na em todas as suas páginas. Regula-a uma vez, e ela propaga-se a toda a app. É o nosso princípio «Set once, consistent everywhere», no centro da fundação [Cor](https://pt.goodbarber.com/uxdesign/color/) do Design System da GoodBarber. Escolher os próprios tons é outra questão, tratada [num artigo e cinco ferramentas](https://pt.goodbarber.com/blog/como-escolher-as-cores-certas-para-seu-app-a1013/). Aqui, vemos como a app os usa. ## Um papel por cor ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98459063-68663972.jpg?v=1792669104.9181154) No painel Cores, as quatro «Cores primárias» e depois as duas «Cores secundárias» têm cada uma um papel, o mesmo em toda a app. Aqui estão, pela ordem do painel, como na imagem. 1. **O texto principal**, os títulos e o texto dos artigos. 2. **A cor de destaque**, a informação sob o título, a morada de um evento, o ícone de uma ação selecionada. 3. **O texto secundário**, a informação acima do título (data, categoria), os autores, a ligação para a lista completa. 4. **O fundo das superfícies**, as células e os cabeçalhos dos widgets. 5. **As bordas**, à volta das células. 6. **O fundo secundário**, o de um widget quando lhe dá um. Numa app GoodBarber, uma cor tem portanto uma função, não um lugar. Se a sua cor de destaque for azul, tudo o que a leva fica azul, de um ecrã para o outro. E quando muda de tom, o texto continua a ser texto, o fundo continua a ser fundo. As zonas da app, o «Cabeçalho», o menu, os botões, têm as suas próprias definições, no mesmo painel. O amarelo das pastilhas de data, o 7 na imagem, vem assim dos «Outros botões». ## Regule as suas cores no 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) Tudo se passa no painel **Cores**, em três gestos, do mais amplo ao mais fino. 1. **Escolha um tema.** O carrossel dos «Temas de cores» propõe dezenas, entre os quais os [temas Classic](https://pt.goodbarber.com/blog/novos-temas-classic-para-lancar-a-sua-app-mais-depressa-a1324/) lançados este verão. Um tema preenche de uma vez as vinte definições do painel. A «Paleta mágica» também pode compor um para si, e o botão «Criar um tema de cores» guarda o seu, que se junta ao carrossel. No vídeo, é o tema «Eastside» da escola de música. 2. **Mude uma cor.** Clique numa cor, introduza o seu código hexadecimal e depois «Escolha». A pré-visualização acompanha de imediato. 3. **Aplique.** O botão «Aplicar» repinta a app inteira, depois de uma confirmação. Todos os elementos ganham as cores do tema, em todas as suas páginas. «Estilo da app» reúne também os painéis **Tipos de letra**, **Botões** e **Campos de formulário**, que regulam da mesma forma toda a app a partir de um só sítio. Para um só elemento, abra o painel de design da sua secção ou do seu widget. As suas cores vêm aí pré-preenchidas pelo tema, e pode mudar uma delas só para essa lista. É o fim do vídeo, onde a célula «Room change» passa a amarelo. A extensão gratuita **Edição avançada** e o seu botão { EDIÇÃO } vão mais longe, com a cor de cada elemento [escrita em hexadecimal](https://pt.goodbarber.com/uxdesign/atom-color/), como para [a sombra](https://pt.goodbarber.com/blog/como-regular-a-sombra-na-minha-app-a1363/) e [as bordas](https://pt.goodbarber.com/blog/como-regular-as-bordas-na-minha-app-a1372/). O painel Cores, esse, continua a ser o nível de toda a app, e aí «Aplicar» repõe cada elemento na cor do seu papel. Regule portanto o seu tema primeiro, e os seus detalhes depois. ## Antes, depois: uma só cor muda, e tudo o que a leva acompanha ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98459063-68663974.jpg?v=1792669106.3741162) Eis duas vezes o mesmo ecrã, e só uma cor mudou entre os dois, a cor de destaque. À esquerda, tem a cor do texto, e tudo se lê ao mesmo nível. À direita, passa ao azul da marca, e com ela a informação sob o título do aviso e a morada de cada ensaio, com o seu ícone. O olhar encontra logo o que é útil. Nem os títulos, nem os fundos, nem os tipos de letra mudaram. Uma só definição chega longe. Numa das nossas apps GoodBarber, mudar a cor do texto principal repintou 95 definições de uma vez, em toda a app, sem abrir um único ecrã. É o nosso princípio «No design burden», para que a coerência nunca fique a seu cargo. Para julgar a sua regulação, veja a pré-visualização antes de aplicar e depois percorra duas ou três páginas. Se a cor de destaque salta à vista onde não devia, é provavelmente o elemento que a leva que deve retocar, no seu painel de design. ## Quatro formas de usar a cor de destaque ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98459063-68663975.jpg?v=1792669107.7421172) Estas quatro apps usam os mesmos papéis, e no entanto não se parecem. A diferença está nas definições onde cada uma põe a sua cor. - **Eastside Music Workshop** põe o seu azul na cor de destaque, que aqui colore a morada de um ensaio, e o seu amarelo nos «Outros botões», que colorem as pastilhas de data. - **Blandas Astronomy Club** põe o seu âmbar nas definições da sua barra de separadores, e aqui só o separador atual se acende. - **Unit 7** põe o seu verde fluorescente no fundo do separador ativo, um bloco de cor plena com o nome escrito por cima. - **Tweed & Cheviot** põe o seu vermelho na cor de destaque, mas só mostra a informação sob o título onde ela conta, aqui o número a reter. Cabe-lhe a si escolher onde pôr a sua. Pergunte-se o que ela deve dizer, o que está ativo, o que é novo, o que espera um gesto. ## A minha regulação preferida: nunca branco puro, nunca preto puro ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98459063-68663976.jpg?v=1792669109.122118) A minha regulação preferida não se nota. Para o fundo das superfícies, nunca ponho #FFFFFF, mas um branco ligeiramente tingido, #FFF8ED na Eastside, pousado sobre um «Fundo da app» um tom mais escuro, #EDE7DD. As células destacam-se sem sombra, e o ecrã ganha matéria, como papel. Para o texto principal, também nunca #000000, mas um quase-preto com cor, #23252B aqui. O preto puro sobre branco dá o contraste máximo, 21:1, que acho duro numa leitura longa. #23252B sobre #FFF8ED mantém 14,5:1, o dobro do nível mais exigente das WCAG (7:1), com mais suavidade. Três valores, e toda a app ganha com isso, os títulos, os textos, as células. É o que o papel permite, regular uma vez, para todo o lado. **As cores em resumo** - Numa app GoodBarber, as cores de toda a app regulam-se num só painel, vinte definições, das quais seis cores que têm cada uma um papel. - Uma cor tem uma função, não um lugar, o texto principal, a cor de destaque, o texto secundário, o fundo das superfícies, as bordas, o fundo secundário. - Tudo se regula no painel Cores, um tema, a Paleta mágica ou uma só cor, e depois «Aplicar», que repinta a app inteira. - Um elemento retoca-se no painel da sua secção ou do seu widget, ou chave a chave com a extensão gratuita Edição avançada. - Regule o tema primeiro, os detalhes depois. - Duas regulações de designer, nunca branco puro nas superfícies, nunca preto puro no texto. ## É a sua vez Abra **A minha app › Estilo da app › Cores**, clique na sua cor de destaque e experimente outro tom na pré-visualização. Nada é aplicado enquanto não clicar em «Aplicar». Ainda não tem app? [Crie a sua](https://pt.goodbarber.com/create/) com a GoodBarber, o Mobile App Builder. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) Sobre o autor Marie-Pierre Jeffard UI Designer Sou UI Designer da GoodBarber. Design system das apps, componentes, layouts, site, ilustrações, animações: tudo o que faço gira em torno da interface. O que me agrada no nosso produto é inventar regras universais, que funcionam em todos os ecrãs e acolhem todas as identidades visuais. A app torna-se uma montra para o seu conteúdo. Gosto do que parece simples, e de todo o trabalho invisível necessário para lá chegar: as regras, as escolhas e as restrições que mantêm uma interface de pé. É isso que conto aqui. [Mais de Marie-Pierre](https://pt.goodbarber.com/blog/author/marie-pierre-jeffard/)[LinkedIn](https://www.linkedin.com/in/marie-pierre-jeffard/)