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

# Usa temas para mantener coherentes los colores y el redondeo de las esquinas en todas las pantallas de Flowstep

> Elige o genera un tema para cada archivo, cambia el estilo de pantallas individuales, edita los temas de tu organización y vincula colores y esquinas a tokens del tema para que los cambios se apliquen a todas las pantallas.

Un tema es una paleta de colores compartida y un redondeo de esquinas para tus pantallas. Cada archivo tiene un tema y una apariencia (clara u oscura), y las pantallas se estilizan con los tokens del tema. Si editas un tema, todas las pantallas que lo usan se actualizan, así que tu equipo trabaja con un único conjunto de decisiones en lugar de repetir los colores en cada prompt.

Los temas que creas o generas se guardan en tu organización y aparecen en **Themes** en Home, así que cualquier archivo de la organización puede usarlos.

## Elegir un tema para un archivo

Elige el tema y la apariencia de las pantallas nuevas desde el redactor de prompts dentro de un archivo. El botón de tema no está disponible en el cuadro de prompts de Home.

<Steps>
  <Step title="Abre el menú de temas">
    En el redactor de prompts, haz clic en el botón de tema. Muestra la muestra de color del tema actual, o una rueda de colores cuando el tema es **Automatic**. El menú se titula **Theme for new screens**.
  </Step>

  <Step title="Elige un tema">
    Elige **Automatic**, uno de los temas de tu organización (aparecen primero) o un tema integrado: **Default**, **Blue**, **Grayscale**, **Green**, **Ice**, **Orange**, **Red**, **Rose**, **Violet** o **Yellow**.
  </Step>

  <Step title="Elige una apariencia">
    En **Appearance**, elige **Light** o **Dark**, o **Automatic** para que Flowstep decida por pantalla según tu prompt. Un "panel oscuro" sale en oscuro.
  </Step>
</Steps>

<Note>
  Tu elección se aplica a las pantallas que generes a continuación. Las pantallas que ya están en el lienzo conservan su aspecto.
</Note>

## Dejar que Flowstep diseñe un tema

Cuando un archivo aún no tiene tema (un archivo nuevo con el tema en **Automatic**), Flowstep diseña un tema personalizado junto con las primeras pantallas que genera. Verás un paso **Designing theme** en el chat mientras trabaja.

Flowstep construye el tema a partir de:

* Los colores que nombres en tu prompt
* Los colores de tus [directrices de diseño](/es/design-guidelines)
* Los colores de marca de los adjuntos y de los [enlaces que pegues](/es/design-references#paste-a-url)
* El producto y el estado de ánimo que describe tu prompt, cuando no hay nada más específico en lo que basarse

El tema tiene un nombre corto, una paleta completa para los modos claro y oscuro, y un paso de redondeo. Se guarda en tu organización, bajo **Themes** en Home, y el archivo lo usa para cada pantalla que se genere a partir de ese momento.

Una vez que un archivo tiene un tema, Flowstep no diseña otro por su cuenta. Para obtener un tema nuevo, vuelve a elegir **Automatic** en el menú de temas: la siguiente generación diseña uno nuevo y el archivo se queda con él. Si Flowstep no puede diseñar un tema, el archivo recurre a uno integrado.

<Tip>
  Menciona tus colores de marca en tu primer prompt, o configúralos en tus [directrices de diseño](/es/design-guidelines) antes de generar. El tema generado partirá de ellos.
</Tip>

## Cambiar el tema de una pantalla

Para cambiar el estilo de una sola pantalla sin tocar el resto del archivo:

1. Selecciona la pantalla en el lienzo.
2. En el menú situado sobre la pantalla, haz clic en el botón **Theme**.
3. Elige uno de los temas de tu organización o un tema integrado, o cambia entre **Light** y **Dark**.

Cambiar el tema repinta la pantalla al instante. Cambiar entre **Light** y **Dark** pide a la IA que vuelva a estilizar la pantalla, igual que una [edición con IA](/es/editing-designs). El menú no está disponible mientras hay una generación en curso.

## Editar un tema

Abre un tema desde la sección **Themes** de Home. El editor de temas muestra una vista previa en vivo del tema, con **Theme settings** a la derecha. Usa los botones **Light** y **Dark** de la parte superior para cambiar la vista previa, y haz clic en el nombre del tema para renombrarlo.

* **Colors**: cada grupo de colores tiene una muestra para el modo claro y otra para el oscuro: **Primary**, **Secondary**, **Accent**, **Muted**, **Destructive**, **Background**, **Card**, **Popover**, **Border**, **Input**, **Ring**, **Charts** y **Sidebar**. Haz clic en una muestra para editar sus colores (por ejemplo, el relleno y el color del texto de un grupo) con el selector de color o un valor hexadecimal.
* **Radius**: elige un nivel de redondeo (**Square**, **Slight**, **Balanced**, **Soft** o **Round**), o elige **Custom** y arrastra **Base radius** para definir el tuyo.

Tus ediciones se guardan como borrador, así que las pantallas no cambian mientras trabajas. Cuando estés listo:

* Haz clic en **Publish** para actualizar todas las pantallas que usan el tema. Flowstep confirma con "Published. Screens using this theme are updating." (Publicado. Las pantallas que usan este tema se están actualizando).
* Haz clic en **Reset changes** para descartar tus cambios sin publicar. Las pantallas que usan el tema no se ven afectadas.

Para eliminar un tema, haz clic en **Delete theme** al final de **Theme settings**, o en el icono de papelera junto al tema en la lista **Themes** de Home. Un tema eliminado ya no aparece en los menús de temas, pero las pantallas que ya lo usan conservan su aspecto, así que nada de tu lienzo cambia.

<Note>
  Todos los miembros de tu organización, excepto los Guest (invitado), pueden editar y eliminar temas.
</Note>

## Vincular colores y esquinas a tu tema

Los colores y las esquinas pueden apuntar a un token del tema en lugar de a un valor fijo. Un valor vinculado sigue al tema de la pantalla, así que cuando cambia el tema (otro tema, una edición publicada o un cambio entre claro y oscuro), los colores y las esquinas vinculados se actualizan con él.

**Colors**: en el panel **Fill** o **Border**, haz clic en la muestra de color. En la pestaña **Token**, busca o elige un token de los grupos **Theme**, **Base** o **Tailwind**. Usa la pestaña **Custom** para un color exacto. Un color vinculado muestra el nombre de su token en el panel, y aún puedes ajustar su opacidad.

**Corners**: en el panel **Corners**, haz clic en una vista previa de esquina. En la pestaña **Token**, elige un paso (por ejemplo, `md` o `lg`); en la pestaña **Custom**, escribe un valor exacto en píxeles. Una esquina vinculada muestra el nombre de su token, y si cambias el redondeo del tema, la esquina se vuelve a redondear.

Para convertir un valor vinculado en uno fijo, haz clic en **Detach from token**. El color o la esquina conserva su aspecto actual, pero ya no sigue al tema.

## Lo que conviene saber

* **Las pantallas conservan su propio tema**: cada pantalla recuerda su tema y su apariencia. Cambiar el tema del archivo solo afecta a las pantallas que generes a continuación. Usa el menú **Theme** de cada pantalla para cambiar el estilo de las existentes.
* **Solo versiones publicadas**: las pantallas muestran la versión publicada de un tema. Los borradores solo son visibles en el editor de temas hasta que los publiques.
* **Los enlaces a tokens sobreviven a las ediciones**: los colores del tema usados dentro de sombras, filtros y degradados siguen vinculados al tema cuando Flowstep edita o regenera una pantalla.
* **Pasos de redondeo que no escalan**: los tokens de esquina `none` y `full` siempre son cuadrados y totalmente redondeados, sin importar el redondeo del tema.


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