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

# Use temas para manter as cores e os cantos arredondados consistentes em todos os ecrãs do Flowstep

> Escolha ou gere um tema para cada ficheiro, estilize ecrãs individuais de novo, edite os temas da sua organização e associe cores e cantos a tokens de tema para que as alterações se propaguem a todos os ecrãs.

Um tema é uma paleta de cores partilhada e um arredondamento de cantos para os seus ecrãs. Cada ficheiro tem um tema e uma aparência (clara ou escura), e os ecrãs são estilizados com os tokens do tema. Edite um tema e todos os ecrãs que o usam acompanham a alteração, por isso a sua equipa trabalha a partir de um único conjunto de decisões, em vez de repetir cores em cada prompt.

Os temas que criar ou gerar são guardados na sua organização e listados em **Themes** no Home, para que qualquer ficheiro da organização os possa usar.

## Escolher um tema para um ficheiro

Escolha o tema e a aparência para os novos ecrãs no compositor de prompts dentro de um ficheiro. O botão de tema não está disponível na caixa de prompts no Home.

<Steps>
  <Step title="Abrir o menu de temas">
    No compositor de prompts, clique no botão de tema — mostra a amostra de cor do tema atual, ou uma roda de cores quando o tema é **Automatic**. O menu tem o título **Theme for new screens**.
  </Step>

  <Step title="Escolher um tema">
    Escolha **Automatic**, um dos temas da sua organização (listados primeiro) ou um tema incorporado: **Default**, **Blue**, **Grayscale**, **Green**, **Ice**, **Orange**, **Red**, **Rose**, **Violet** ou **Yellow**.
  </Step>

  <Step title="Escolher uma aparência">
    Em **Appearance**, escolha **Light** ou **Dark**, ou **Automatic** para deixar o Flowstep decidir por ecrã a partir do seu prompt — "a dark dashboard" sai escuro.
  </Step>
</Steps>

<Note>
  A sua escolha aplica-se aos ecrãs que gerar a seguir. Os ecrãs que já estão na tela mantêm o seu aspeto.
</Note>

## Deixar o Flowstep desenhar um tema

Quando um ficheiro ainda não tem tema — um ficheiro novo com o tema deixado em **Automatic** —, o Flowstep desenha um tema personalizado juntamente com os primeiros ecrãs que gera. Verá um passo **Designing theme** no chat enquanto trabalha.

O Flowstep constrói o tema a partir de:

* Cores que indica no seu prompt
* Cores nas suas [diretrizes de design](/pt/design-guidelines)
* Cores de marca em anexos e em [ligações que cola](/pt/design-references#paste-a-url)
* O produto e a atmosfera que o seu prompt descreve, quando não houver nada mais específico em que se basear

O tema recebe um nome curto, uma paleta completa para os modos claro e escuro, e um passo de arredondamento. É guardado na sua organização em **Themes** no Home, e o ficheiro usa-o em todos os ecrãs gerados a partir daí.

Depois de um ficheiro ter um tema, o Flowstep não desenha outro por iniciativa própria. Para obter um tema novo, escolha **Automatic** outra vez no menu de temas — a geração seguinte desenha um novo tema e o ficheiro passa a usá-lo. Se o Flowstep não conseguir desenhar um tema, o ficheiro recorre a um tema incorporado.

<Tip>
  Mencione as cores da sua marca no primeiro prompt, ou defina-as nas suas [diretrizes de design](/pt/design-guidelines) antes de gerar, e o tema gerado parte delas.
</Tip>

## Alterar o tema de um ecrã

Para estilizar de novo um único ecrã sem tocar no resto do ficheiro:

1. Selecione o ecrã na tela.
2. No menu acima do ecrã, clique no botão **Theme**.
3. Escolha um dos temas da sua organização ou um tema incorporado, ou alterne entre **Light** e **Dark**.

Mudar de tema repinta o ecrã instantaneamente. Alternar entre **Light** e **Dark** pede à IA que estilize o ecrã de novo, do mesmo modo que uma [edição com IA](/pt/editing-designs). O menu fica indisponível enquanto uma geração estiver a decorrer.

## Editar um tema

Abra um tema na secção **Themes** no Home. O editor de temas mostra uma pré-visualização em tempo real do tema, com **Theme settings** à direita. Use os botões **Light** e **Dark** no topo para alternar a pré-visualização, e clique no nome do tema para o mudar.

* **Colors** — cada grupo de cores tem uma amostra para o modo claro e outra para o modo escuro: **Primary**, **Secondary**, **Accent**, **Muted**, **Destructive**, **Background**, **Card**, **Popover**, **Border**, **Input**, **Ring**, **Charts** e **Sidebar**. Clique numa amostra para editar as cores de um grupo — por exemplo, a cor de preenchimento e a cor do texto — com o seletor de cores ou com um valor hexadecimal.
* **Radius** — escolha um passo de arredondamento (**Square**, **Slight**, **Balanced**, **Soft** ou **Round**), ou escolha **Custom** e arraste **Base radius** para definir o seu próprio valor.

As suas edições são guardadas como rascunho, por isso os ecrãs não mudam enquanto trabalha. Quando estiver pronto:

* Clique em **Publish** para atualizar todos os ecrãs que usam o tema. O Flowstep confirma com "Published. Screens using this theme are updating."
* Clique em **Reset changes** para descartar as alterações não publicadas. Os ecrãs que usam o tema não são afetados.

Para remover um tema, clique em **Delete theme** no fim de **Theme settings**, ou no ícone do lixo ao lado do tema na lista **Themes** no Home. Um tema eliminado deixa de ser oferecido nos menus de temas, mas os ecrãs que já o usam mantêm o seu aspeto, por isso nada na sua tela muda.

<Note>
  Todos na sua organização, exceto os Guests (convidados), podem editar e eliminar temas.
</Note>

## Associar cores e cantos ao seu tema

As cores e os cantos podem apontar para um token de tema em vez de um valor fixo. Um valor associado segue o tema do ecrã, por isso, quando o tema muda — um tema diferente, uma edição publicada ou uma alternância entre claro e escuro —, as cores e os cantos associados são atualizados também.

**Colors** — no painel **Fill** ou **Border**, clique na amostra de cor. No separador **Token**, pesquise ou escolha um token dos grupos **Theme**, **Base** ou **Tailwind**. Use o separador **Custom** para uma cor exata. Uma cor associada mostra o nome do seu token no painel, e pode continuar a ajustar a sua opacidade.

**Corners** — no painel **Corners**, clique numa pré-visualização de canto. No separador **Token**, escolha um passo (por exemplo, `md` ou `lg`); no separador **Custom**, escreva um valor exato em pixels. Um canto associado mostra o nome do seu token, e alterar o arredondamento do tema volta a arredondá-lo.

Para transformar um valor associado de novo num valor fixo, clique em **Detach from token**. A cor ou o canto mantém o seu aspeto atual, mas deixa de seguir o tema.

## Bom saber

* **Os ecrãs mantêm o seu próprio tema** — cada ecrã guarda o seu tema e a sua aparência. Alterar o tema do ficheiro só afeta os ecrãs que gerar a seguir; use o menu **Theme** de cada ecrã para estilizar os existentes.
* **Apenas versões publicadas** — os ecrãs mostram a versão publicada de um tema. Os rascunhos só são visíveis no editor de temas até publicar.
* **As associações a tokens sobrevivem às edições** — as cores do tema usadas em sombras, filtros e gradientes mantêm-se associadas ao tema quando o Flowstep edita ou regenera um ecrã.
* **Passos de arredondamento que não se ajustam** — os tokens de canto `none` e `full` são sempre quadrados e totalmente redondos, independentemente do arredondamento do tema.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.