> ## 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 cores e arredondamento de cantos consistentes em todas as telas do Flowstep

> Escolha ou gere um tema para cada arquivo, reestilize telas individuais, edite os temas da sua organização e vincule cores e cantos a tokens de tema para que as mudanças se propaguem por todas as telas.

Um tema é uma paleta de cores compartilhada e um arredondamento de cantos para as suas telas. Todo arquivo tem um tema e uma aparência (claro ou escuro), e as telas são estilizadas com os tokens do tema. Edite um tema e todas as telas que o usam acompanham a mudança, para que sua equipe trabalhe com um único conjunto de decisões em vez de repetir cores em cada prompt.

Os temas que você cria ou gera são salvos na sua organização e listados em **Themes** na Home, para que qualquer arquivo da organização possa usá-los.

## Escolha um tema para um arquivo

Escolha o tema e a aparência das novas telas no compositor de prompts dentro de um arquivo. O botão de tema não está disponível na caixa de prompt na Home.

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

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

  <Step title="Escolha uma aparência">
    Em **Appearance**, escolha **Light** ou **Dark**, ou **Automatic** para que o Flowstep decida por tela com base no seu prompt — "a dark dashboard" sai escuro.
  </Step>
</Steps>

<Note>
  Sua escolha se aplica às telas que você gerar a seguir. As telas que já estão no canvas mantêm a aparência atual.
</Note>

## Deixe o Flowstep criar um tema

Quando um arquivo ainda não tem um tema — um novo arquivo com o tema em **Automatic** — o Flowstep cria um tema personalizado junto com as primeiras telas que gera. Você verá uma etapa **Designing theme** no chat enquanto ele trabalha.

O Flowstep cria o tema a partir de:

* Cores que você menciona no seu prompt
* Cores nas suas [diretrizes de design](/pt-BR/design-guidelines)
* Cores de marca em anexos e em [links que você cola](/pt-BR/design-references#paste-a-url)
* O produto e o clima descritos no seu prompt, quando não há nada mais específico para se basear

O tema recebe um nome curto, uma paleta completa para claro e escuro, e um nível de arredondamento. Ele é salvo na sua organização em **Themes** na Home, e o arquivo o usa em todas as telas geradas depois disso.

Depois que um arquivo tem um tema, o Flowstep não cria outro por conta própria. Para obter um tema novo, escolha **Automatic** novamente no menu de temas — a próxima geração cria um novo tema, e o arquivo passa a usá-lo. Se o Flowstep não conseguir criar um tema, o arquivo usa um dos temas integrados.

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

## Altere o tema de uma tela

Para reestilizar uma única tela sem alterar o restante do arquivo:

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

Trocar o tema repinta a tela instantaneamente. Alternar entre **Light** e **Dark** pede à IA que reestilize a tela, da mesma forma que uma [edição com IA](/pt-BR/editing-designs). O menu fica indisponível enquanto uma geração estiver em execução.

## Edite um tema

Abra um tema pela seção **Themes** na Home. O editor de temas mostra uma prévia ao vivo do tema, com **Theme settings** à direita. Use os botões **Light** e **Dark** no topo para alternar a prévia, e clique no nome do tema para renomeá-lo.

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

Suas edições são salvas como rascunho, então as telas não mudam enquanto você trabalha. Quando estiver pronto:

* Clique em **Publish** para atualizar todas as telas que usam o tema. O Flowstep confirma com "Published. Screens using this theme are updating." (Publicado. As telas que usam este tema estão sendo atualizadas.)
* Clique em **Reset changes** para descartar suas alterações não publicadas. As telas que usam o tema não são afetadas.

Para remover um tema, clique em **Delete theme** na parte inferior de **Theme settings**, ou no ícone de lixeira ao lado dele na lista **Themes** na Home. Um tema excluído não aparece mais nos menus de temas, mas as telas que já o usam mantêm a aparência, então nada no seu canvas muda.

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

## Vincule cores e cantos ao seu tema

Cores e cantos podem apontar para um token de tema em vez de um valor fixo. Um valor vinculado acompanha o tema da tela, então, quando o tema muda — um tema diferente, uma edição publicada ou a troca entre claro e escuro —, as cores e os cantos vinculados são atualizados junto.

**Colors** — no painel **Fill** ou **Border**, clique na amostra de cor. Na aba **Token**, pesquise ou escolha um token dos grupos **Theme**, **Base** ou **Tailwind**. Use a aba **Custom** para uma cor exata. Uma cor vinculada mostra o nome do token no painel, e você ainda pode ajustar a opacidade.

**Corners** — no painel **Corners**, clique na prévia de um canto. Na aba **Token**, escolha um nível (por exemplo, `md` ou `lg`); na aba **Custom**, digite um valor exato em pixels. Um canto vinculado mostra o nome do token, e alterar o arredondamento do tema o recalcula.

Para transformar um valor vinculado em fixo novamente, clique em **Detach from token**. A cor ou o canto mantém a aparência atual, mas deixa de acompanhar o tema.

## Informações úteis

* **As telas mantêm o próprio tema** — cada tela lembra seu tema e sua aparência. Alterar o tema do arquivo afeta apenas as telas que você gerar a seguir; use o menu **Theme** de cada tela para reestilizar as existentes.
* **Somente versões publicadas** — as telas mostram a versão publicada de um tema. Os rascunhos ficam visíveis apenas no editor de temas até você publicar.
* **Vínculos de token sobrevivem a edições** — as cores do tema usadas dentro de sombras, filtros e gradientes continuam vinculadas ao tema quando o Flowstep edita ou regenera uma tela.
* **Níveis de arredondamento que não se ajustam** — os tokens de canto `none` e `full` são sempre quadrados e totalmente arredondados, independentemente do arredondamento do tema.


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