Como mudar as cores da minha app?

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.

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».

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.

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 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.