---
title: "Estilos reutilizables"
description: "Guarda configuraciones de texto y color como estilos reutilizables, aplícalos a cualquier elemento y actualiza todos los elementos que los usen a la vez."
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skills: `npx adapty skills install --yes`

Crea un estilo para almacenar configuraciones de texto o un relleno (como un color, un degradado o una imagen de fondo) y reutilízalo en elementos de varias pantallas. Cuando editas un estilo, el cambio se aplica a todos los elementos y pantallas que lo usan.

Cada flow tiene su propio conjunto de estilos.

Abre el panel **Styles** Styles para crear, explorar y editar los estilos de tu flow:

- **Text styles**: ajustes tipográficos (fuente, peso, tamaño).
- **Color styles**: rellenos como colores, degradados e imágenes. Un mismo estilo de color puede incluir versiones separadas para modo claro y modo oscuro.

## Estilos de texto \{#text-styles\}

:::link
Artículo principal: [Contenido de texto](onboarding-text)
:::

Los estilos de texto almacenan un conjunto de configuraciones tipográficas: familia de fuente, grosor, tamaño, altura de línea y espaciado entre letras. Cada plantilla de flow incluye ajustes predeterminados, y puedes crear estilos personalizados.

Para crear un estilo de texto:

1. Abre el panel **Styles** Styles.
2. En el encabezado del panel, haz clic en Create style **Create style**.
3. Establece **Type** en **Text**, introduce un nombre y configura los ajustes tipográficos.
4. Haz clic en **Create**.

Para guardar la configuración tipográfica actual de un elemento de texto como un nuevo estilo de texto, haz clic en Create text style junto a las pestañas del selector de fuente. El elemento usará entonces el nuevo estilo.

Para aplicar un estilo de texto, selecciona un elemento de texto y elige el estilo en el desplegable de fuente de la sección **Typography**.

Para editar un estilo de texto, haz clic en su entrada en el panel **Styles**, cambia su configuración y haz clic en **Save**.

## Estilos de color \{#color-styles\}

Un estilo de color es un [relleno](builder-styling#fill) guardado: un color, un degradado, una imagen, un vídeo o una combinación de ellos. Si usas un [tema oscuro](#dark-mode), puede tener versiones específicas para cada tema. El número que aparece en la entrada del estilo indica cuántos elementos y pantallas lo usan.

### Crear un estilo de color \{#create-a-color-style\}

Para crear un estilo de color:

1. Abre el panel **Styles** Styles.
2. En la cabecera del panel, haz clic en Create style **Create style**.
3. Establece **Type** en **Color** e introduce un nombre.
4. Configura el estilo. Puedes cambiar el color o el [tipo de relleno](#edit-a-color-style) de su capa, y añadir [más capas](#multi-layer-styles) encima.
5. Haz clic en **Save**.

Para convertir el valor actual de una capa de relleno o un color en un estilo, haz clic en su muestra, luego haz clic en el icono Create color style junto a las pestañas **Custom** y **Styles**, y haz clic en **Save**. La capa de relleno o el color ahora usa el estilo.

### Editar un estilo de color \{#edit-a-color-style\}

Para editar un estilo de color:

1. Abre el panel **Styles** Styles.
2. Selecciona la pestaña **Colors**.
3. Haz clic en una entrada de estilo.
4. Cada versión puede tener varias [capas](#multi-layer-styles). Haz clic en la muestra para configurar la capa según su tipo de relleno:
    - [Color sólido](#solid-colors)
    - [Degradado](#gradients)
    - [Imagen o vídeo](#images-and-videos)

#### Colores sólidos \{#solid-colors\}

1. Establece el color: introduce un valor hexadecimal o haz clic en la muestra y elige uno.
2. Ajusta la opacidad con el deslizador.
3. Haz clic en **Save**.

#### Degradados \{#gradients\}

1. Selecciona el tipo de relleno Gradient **Gradient**.
2. Configura las paradas, los colores de las paradas y la **Direction**.
3. Haz clic en **Save**.

:::tip
Para facilitar la lectura de los elementos de texto sobre una imagen de fondo, [oscurece el borde de la imagen](paywall-head-picture#tint-a-background) que hay detrás de ellos. Añade una [capa](#multi-layer-styles) de degradado sobre la imagen. Haz que el degradado vaya desde un punto de parada opaco en ese borde hasta un punto de parada transparente en el otro extremo.
:::

#### Imágenes y vídeos \{#images-and-videos\}

Un elemento de imagen o vídeo no puede tener un archivo diferente para el tema oscuro. En su lugar, crea un contenedor [y establece su fondo](paywall-dark-mode#recipe-add-an-image-that-changes-with-the-theme) con un estilo de color. En cada versión del estilo, configura una capa de imagen o vídeo:

1. Selecciona el tipo de relleno Image **Image** o Video **Video**.
2. Sube el archivo fuente para el [idioma](custom-media#localize-media) seleccionado en la barra inferior. Puedes hacer clic en **Replace** si ya hay un archivo cargado.
3. Haz clic en **Save**.

:::tip
Para teñir una imagen o vídeo, añade una capa de color semitransparente [encima](#multi-layer-styles).
:::

### Estilos multicapa \{#multi-layer-styles\}

Cada versión de un estilo de color puede tener varias capas. Puedes usar estilos multicapa para crear efectos visuales más complejos, como imágenes con tinte.

Para añadir una capa, haz clic en la entrada de estilo. Luego, en la sección **Properties**, **Light** o **Dark**, haz clic en el botón Plus. La nueva capa aparece encima de las capas existentes. Para cambiar el orden de las capas, arrastra sus filas. Configura la nueva capa y haz clic en **Save**.

No todas las capas aparecen en todos los lugares donde aplicas el estilo. Algunas capas solo son visibles si aplicas el estilo a ciertas propiedades o elementos:

- **Relleno (inputs y pickers)**: Solo la capa inferior. El resto de capas se ignoran.
- **Relleno (todos los demás elementos)**: Todas las capas.
- **Borde (inputs y pickers)**: Solo un color sólido o degradado. Las capas de imagen y vídeo se ignoran.
- **Borde (todos los demás elementos)**: Colores sólidos y degradados. Las capas de imagen y vídeo se ignoran.
- **Color de texto**: Solo capas de color sólido. Las capas de degradado, imagen y vídeo se ignoran. Si una versión no tiene ninguna capa de color sólido, el texto no tiene color en ese modo y es invisible.
- **Icono, sombra y otros colores**: No admite estilos de varias capas. Solo puedes aplicar un estilo de capa única con un color sólido.

### Aplicar un estilo de color \{#apply-a-color-style\}

Para aplicar un estilo de color a un elemento, haz clic en la muestra de su capa de relleno, color de texto, color de borde o color de icono. Reemplaza el valor estático por el estilo haciendo clic en la pestaña **Styles** y seleccionando la entrada del estilo. Si ningún estilo tiene el valor que necesitas, [guarda el valor actual como estilo](#create-a-color-style).

Para aplicar un estilo a muchos elementos de una pantalla, pídelo al [AI Editor](flow-ai-editor), por ejemplo: `Apply the Card background style to all cards`. Para configurar estilos y aplicarlos en todo el flow, usa el [skill flow-generator](flow-generator-skill).

No puedes aplicar un estilo de color a un elemento de imagen o vídeo, ya que estos elementos no tienen relleno. En su lugar, crea un contenedor [y establece su fondo](paywall-dark-mode#recipe-add-an-image-that-changes-with-the-theme).

## Gestionar estilos \{#manage-styles\}

En el panel **Styles** Styles:

- Para renombrar un estilo, haz clic en su entrada, cambia el campo **Name** y haz clic en **Save**.
- Para duplicar un estilo, haz clic derecho en su entrada y selecciona **Duplicate**.
- Para eliminar un estilo, haz clic en su entrada y luego en **Delete style**. Si el estilo está en uso, selecciona el estilo que lo reemplazará.
- Para cambiar el orden de los estilos, arrastra sus entradas hacia arriba o hacia abajo en la lista.
- Para copiar estilos a otro flow, selecciona sus entradas (Shift+clic para seleccionar varios) y pulsa ⌘C / Ctrl+C. Abre la misma pestaña (**Text** o **Colors**) en el otro flow y pulsa ⌘V / Ctrl+V.

## Modo oscuro \{#dark-mode\}

:::link
Artículo principal: [Modo oscuro](paywall-dark-mode)
:::

Un estilo de color puede tener un valor independiente para el modo oscuro. Cuando el dispositivo del usuario está configurado en modo oscuro, el flow utiliza ese valor en su lugar.

Para usar valores oscuros, [añade un tema oscuro](paywall-dark-mode#add-a-dark-theme) al flow. Luego [cambia el valor oscuro](paywall-dark-mode#configure-the-dark-theme) de cada estilo que deba ser diferente en modo oscuro.