> ## Documentation Index
> Fetch the complete documentation index at: https://docs.agencyhandy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Personalizar os Esquemas de Cores do Seu Workspace AgencyHandy

> Aplique as cores da sua marca à barra lateral e interface do AgencyHandy — cor primária, fundo, texto e estados de hover — visíveis instantaneamente para todos os utilizadores.

As definições de Aparência dão-lhe controlo total sobre o aspeto do seu workspace AgencyHandy. Pode alinhar o esquema de cores da plataforma com a identidade de marca da sua agência ao personalizar a cor primária, o fundo da barra lateral, a cor do texto da barra lateral e a cor de destaque hover para os itens de navegação da barra lateral. Todas as alterações que guardar têm efeito imediato em todo o workspace para todos os utilizadores — sem necessidade de atualizar a página.

<Note>
  Apenas **Super Admins** e **Admins** podem aceder e modificar as definições de Aparência. Se não vir esta opção em **Workspace Config**, peça ao seu Super Admin para rever a sua função.
</Note>

## Aceder às Definições de Aparência

<Steps>
  <Step title="Abrir a Configuração do Workspace">
    No menu de navegação esquerdo, clique em **Workspace Config**.
  </Step>

  <Step title="Selecionar Aparência">
    Clique em **Appearance** (por vezes rotulado como **Visual Settings**) no submenu.
  </Step>
</Steps>

***

## Personalizar Cada Elemento Visual

### Cor Primária

A cor primária é aplicada a botões, ligações ativas, estados em destaque e elementos-chave da interface em toda a plataforma.

* Escolha uma cor que reflita a identidade central da sua marca.
* Esta é a definição de cor com maior impacto porque aparece em toda a interface.

### Cor de Fundo da Barra Lateral

O fundo da barra lateral define o tom base do painel de navegação esquerdo.

* Utilize uma cor que crie uma separação visual clara entre a barra lateral e a área de conteúdo principal.
* Fundos escuros com texto claro funcionam geralmente melhor para legibilidade.

### Cor do Texto da Barra Lateral

A cor do texto da barra lateral controla a cor das etiquetas de todos os itens de navegação no menu esquerdo.

* Escolha sempre uma cor com forte contraste em relação à cor de fundo da barra lateral.
* Um fraco contraste torna as ligações mais difíceis de ler e reduz a acessibilidade.

### Cor de Fundo Hover da Barra Lateral

Esta cor aparece como destaque de fundo quando um utilizador move o cursor sobre um item de navegação da barra lateral.

* Indica interatividade e ajuda os utilizadores a perceber qual o item que estão prestes a clicar.
* Escolha uma cor visivelmente distinta do fundo padrão da barra lateral e da cor do item ativo.

***

## Aplicar as Suas Escolhas de Cores

<Steps>
  <Step title="Abrir o seletor de cores para cada campo">
    Clique na amostra de cor ao lado de qualquer um dos quatro campos de aparência — Cor Primária, Fundo da Barra Lateral, Cor do Texto da Barra Lateral ou Cor de Fundo Hover da Barra Lateral — para abrir o seletor de cores.
  </Step>

  <Step title="Introduzir um código hexadecimal ou escolher uma cor">
    Digite o código hexadecimal exato da sua marca (p. ex., `#3B5BDB`) diretamente no campo de entrada, ou utilize o seletor visual para escolher um tom.
  </Step>

  <Step title="Pré-visualizar as alterações">
    Reveja o aspeto das cores atualizadas na barra lateral e em toda a interface antes de guardar.
  </Step>

  <Step title="Clique em Guardar Alterações">
    Quando estiver satisfeito com o resultado, clique em **Save Changes**. A aparência atualizada é aplicada globalmente e instantaneamente a todos os utilizadores no workspace.
  </Step>
</Steps>

<Tip>
  Guarde os códigos hexadecimais de cores da sua marca num local acessível (um guia de estilo de marca ou ficheiro de notas). Vai querer reutilizar os mesmos valores consistentemente — especialmente se alguma vez precisar de repor e reconfigurar as definições de aparência.
</Tip>

***

## Repor o Tema Predefinido

Se pretender remover toda a marca personalizada e restaurar o esquema de cores original do AgencyHandy, clique no botão **Reset Default Settings** na página de Aparência.

<Warning>
  Repor as predefinições descarta permanentemente todas as alterações de cores personalizadas. Esta ação não pode ser anulada. Se quiser preservar as suas definições atuais, anote os seus códigos hexadecimais antes de repor.
</Warning>

***

## Melhores Práticas de Contraste de Cores

Um bom contraste de cores não é apenas uma preferência de design — afeta diretamente a legibilidade e a acessibilidade para a sua equipa e clientes.

<CardGroup cols={2}>
  <Card title="Procure rácios de contraste WCAG AA" icon="eye">
    Para texto de corpo normal, utilize um rácio de contraste de pelo menos **4.5:1** entre texto e fundo. Para texto grande ou ícones, um rácio de **3:1** é aceitável. Utilize uma ferramenta como o [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) para verificar.
  </Card>

  <Card title="Evite combinações de baixo contraste" icon="triangle-exclamation">
    Não associe cores como texto cinzento claro sobre branco, ou texto amarelo sobre branco — estas falham os padrões de acessibilidade e cansam os olhos em sessões longas.
  </Card>

  <Card title="Teste os estados hover deliberadamente" icon="arrow-pointer">
    As cores de hover devem ser visivelmente diferentes do estado de repouso e do estado ativo. Se parecerem iguais, os utilizadores perdem feedback visual importante.
  </Card>

  <Card title="Mantenha consistência com a sua marca" icon="paintbrush">
    Utilize a mesma cor primária aqui e no seu site, propostas e faturas. A consistência cria reconhecimento e profissionalismo em todos os pontos de contacto com os clientes.
  </Card>
</CardGroup>

***

## Notas Importantes

* **Efeito global instantâneo:** Todas as alterações de aparência guardadas são aplicadas imediatamente em todo o workspace. Cada utilizador com sessão iniciada vê a atualização na sua próxima ação de navegação.
* **Um tema ativo:** Não existe suporte para múltiplos temas — um conjunto de cores aplica-se a todo o workspace para todas as funções.
* **Restrição de função:** Apenas Super Admins e Admins podem fazer alterações de aparência. Membros regulares da equipa e clientes não podem modificar as cores.
* **A reposição é permanente:** O botão **Reset Default Settings** não pode ser anulado, pelo que deve utilizá-lo apenas quando pretende intencionalmente remover todas as cores personalizadas.
