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

# Fes servir temes per mantenir coherents els colors i l'arrodoniment de les cantonades a totes les pantalles de Flowstep

> Tria o genera un tema per a cada fitxer, reestilitza pantalles individuals, edita els temes de la teva organització i enllaça colors i cantonades amb tokens de tema perquè els canvis s'apliquin a totes les pantalles.

Un tema és una paleta de colors compartida i un arrodoniment de cantonades per a les teves pantalles. Cada fitxer té un tema i una aparença (clara o fosca), i les pantalles s'estilitzen amb els tokens del tema. Si edites un tema, totes les pantalles que el fan servir se n'adapten, de manera que el teu equip treballa amb un sol conjunt de decisions en lloc de repetir els colors en cada prompt.

Els temes que creïs o generis es desen a la teva organització i apareixen a **Themes** a Home, de manera que qualsevol fitxer de l'organització els pot fer servir.

## Tria un tema per a un fitxer

Tria el tema i l'aparença de les pantalles noves des del compositor de prompts dins d'un fitxer. El botó de tema no està disponible a la caixa de prompts de Home.

<Steps>
  <Step title="Obre el menú de temes">
    Al compositor de prompts, fes clic al botó de tema: mostra la mostra de color del tema actual o una roda de colors quan el tema és **Automatic**. El menú té el títol **Theme for new screens**.
  </Step>

  <Step title="Tria un tema">
    Tria **Automatic**, un dels temes de la teva organització (apareixen primers) o un tema integrat: **Default**, **Blue**, **Grayscale**, **Green**, **Ice**, **Orange**, **Red**, **Rose**, **Violet** o **Yellow**.
  </Step>

  <Step title="Tria una aparença">
    Sota **Appearance**, tria **Light** o **Dark**, o **Automatic** perquè Flowstep decideixi per a cada pantalla segons el teu prompt: «un tauler fosc» surt en fosc.
  </Step>
</Steps>

<Note>
  La teva selecció s'aplica a les pantalles que generis a continuació. Les pantalles que ja hi ha al llenç mantenen el seu aspecte.
</Note>

## Deixa que Flowstep dissenyi un tema

Quan un fitxer encara no té cap tema (un fitxer nou amb el tema deixat en **Automatic**), Flowstep dissenya un tema personalitzat juntament amb les primeres pantalles que genera. Mentre treballa, veuràs un pas **Designing theme** al xat.

Flowstep construeix el tema a partir de:

* Els colors que esmentis al teu prompt
* Els colors de les teves [directrius de disseny](/ca/design-guidelines)
* Els colors de marca dels adjunts i dels [enllaços que enganxis](/ca/design-references#paste-a-url)
* El producte i l'ambient que descrigui el teu prompt, quan no hi hagi res més concret en què basar-se

El tema rep un nom curt, una paleta completa per a clar i fosc, i un pas d'arrodoniment. Es desa a la teva organització sota **Themes** a Home, i el fitxer el fa servir per a totes les pantalles que es generin a partir d'aleshores.

Quan un fitxer ja té un tema, Flowstep no n'en dissenya un altre pel seu compte. Per obtenir un tema nou, torna a triar **Automatic** al menú de temes: la següent generació en dissenya un de nou i el fitxer s'hi queda. Si Flowstep no pot dissenyar un tema, el fitxer recorre a un dels temes integrats.

<Tip>
  Menciona els colors de la teva marca al primer prompt, o defineix-los a les teves [directrius de disseny](/ca/design-guidelines) abans de generar, i el tema generat partirà d'ells.
</Tip>

## Canvia el tema d'una pantalla

Per reestilitzar una sola pantalla sense tocar la resta del fitxer:

1. Selecciona la pantalla al llenç.
2. Al menú que hi ha sobre la pantalla, fes clic al botó **Theme**.
3. Tria un dels temes de la teva organització o un tema integrat, o canvia entre **Light** i **Dark**.

Canviar de tema torna a pintar la pantalla a l'instant. Canviar entre **Light** i **Dark** demana a la IA que reestilitzi la pantalla, igual que una [edició amb IA](/ca/editing-designs). El menú no està disponible mentre hi ha una generació en curs.

## Edita un tema

Obre un tema des de la secció **Themes** de Home. L'editor de temes mostra una vista prèvia en directe del tema, amb **Theme settings** a la dreta. Fes servir els botons **Light** i **Dark** de dalt per canviar la vista prèvia, i fes clic al nom del tema per canviar-li el nom.

* **Colors** — cada grup de colors té una mostra per a clar i una per a fosc: **Primary**, **Secondary**, **Accent**, **Muted**, **Destructive**, **Background**, **Card**, **Popover**, **Border**, **Input**, **Ring**, **Charts** i **Sidebar**. Fes clic en una mostra per editar-ne els colors (per exemple, els colors de farciment i de text d'un grup) amb el selector de colors o amb un valor hexadecimal.
* **Radius** — tria un pas d'arrodoniment (**Square**, **Slight**, **Balanced**, **Soft** o **Round**), o tria **Custom** i arrossega **Base radius** per definir-ne un de propi.

Les teves edicions es desen com a esborrany, de manera que les pantalles no canvien mentre treballes. Quan estiguis a punt:

* Fes clic a **Publish** per actualitzar totes les pantalles que fan servir el tema. Flowstep ho confirma amb el missatge «Published. Screens using this theme are updating.» (Publicat. Les pantalles que fan servir aquest tema s'estan actualitzant.)
* Fes clic a **Reset changes** per descartar els canvis no publicats. Les pantalles que fan servir el tema no es veuen afectades.

Per eliminar un tema, fes clic a **Delete theme** a la part inferior de **Theme settings**, o a la icona de paperera que hi ha al costat del tema a la llista **Themes** de Home. Un tema eliminat ja no s'ofereix als menús de temes, però les pantalles que ja l'utilitzen conserven el seu aspecte, de manera que res del llenç canvia.

<Note>
  Tothom de la teva organització, excepte els Guests (convidats), pot editar i eliminar temes.
</Note>

## Enllaça colors i cantonades al teu tema

Els colors i les cantonades poden apuntar a un token de tema en lloc d'un valor fix. Un valor enllaçat segueix el tema de la pantalla, de manera que quan el tema canvia (un tema diferent, una edició publicada o un canvi entre clar i fosc), els colors i les cantonades enllaçats s'actualitzen amb ell.

**Colors**: al panell **Fill** o **Border**, fes clic a la mostra de color. A la pestanya **Token**, cerca o tria un token dels grups **Theme**, **Base** o **Tailwind**. Fes servir la pestanya **Custom** per a un color exacte. Un color enllaçat mostra el nom del seu token al panell, i encara pots ajustar-ne l'opacitat.

**Cantonades**: al panell **Corners**, fes clic a una previsualització de cantonada. A la pestanya **Token**, tria un pas (per exemple, `md` o `lg`); a la pestanya **Custom**, escriu un valor exacte en píxels. Una cantonada enllaçada mostra el nom del seu token, i en canviar l'arrodoniment del tema es torna a arrodonir.

Per convertir un valor enllaçat en un de fix, fes clic a **Detach from token**. El color o la cantonada conserva el seu aspecte actual però ja no segueix el tema.

## Cal saber

* **Les pantalles conserven el seu propi tema**: cada pantalla recorda el seu tema i la seva aparença. Canviar el tema del fitxer només afecta les pantalles que generis a continuació; fes servir el menú **Theme** de cada pantalla per reestilitzar les existents.
* **Només versions publicades**: les pantalles mostren la versió publicada d'un tema. Els esborranys només són visibles a l'editor de temes fins que publiquis.
* **Els enllaços de tokens es mantenen en les edicions**: els colors del tema que s'utilitzen dins d'ombres, filtres i degradats continuen enllaçats al tema quan Flowstep edita o regenera una pantalla.
* **Passos d'arrodoniment que no s'escalen**: els tokens de cantonada `none` i `full` són sempre quadrats i totalment arrodonits, independentment de l'arrodoniment del tema.


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