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

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.

​

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
• Los colores de marca de los adjuntos y de los enlaces que pegues
• 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.

​

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

​

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.