> For the complete documentation index, see [llms.txt](https://docs.dapta.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dapta.ai/dapta-docs-es/dforms/design/themes-colors-background.md).

# Temas, colores y fondo

Dale un esquema de color a tu formulario de dForms: parte de uno de los nueve temas, define Fondo, Texto y Color de marca con comprobación de contraste en vivo, y escoge un fondo Plano, Degradado, Res

Las tarjetas **Tema** y **Colores** del panel de Diseño deciden cómo se ve tu formulario de un vistazo: el fondo, el texto encima y el único color de acento que se usa en botones y opciones seleccionadas. Los temas te dan una paleta que ya funciona; los selectores de color te dejan igualar tu marca con exactitud, y el panel te avisa cuando una combinación es difícil de leer.

***

**Paso 1:** Abre tu formulario, abre la pestaña **Diseño**. Baja hasta la tarjeta **Tema**.

***

**Paso 2:** Haz clic en una tarjeta de tema para aplicarlo. Cada tema define seis cosas a la vez: fondo, texto, acento, tipografía, esquinas y estilo de botón. La vista previa de la derecha se actualiza al instante. La tarjeta seleccionada muestra una marca de verificación.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-de5fe2da2e9d94299623c0c39050d9fc396c87b4%2Fforms-themes-colors-background-01-theme-presets.png?alt=media" alt="La tarjeta Tema con sus temas predefinidos y el tema dForms elegido, junto a la vista previa en vivo"><figcaption><p>Elige un tema y luego cambia lo que quieras de abajo. Aquí se aplicó el tema <strong>Ocean</strong>.</p></figcaption></figure>

Los nueve temas:

| Tema             | Apariencia                                                                   | Tipografía       | Esquinas | Botón    |
| ---------------- | ---------------------------------------------------------------------------- | ---------------- | -------- | -------- |
| **Control Room** | Fondo oscuro, acento lima (la apariencia por defecto de un formulario nuevo) | Figtree          | Suaves   | Sólido   |
| **Midnight**     | Fondo gris oscuro, acento lima                                               | Poppins          | Suaves   | Sólido   |
| **Paper**        | Fondo blanco cálido, acento verde profundo                                   | Inter            | Suaves   | Sólido   |
| **Noir**         | Fondo casi negro, acento dorado                                              | Playfair Display | Rectas   | Contorno |
| **Ocean**        | Fondo azul muy claro, acento azul                                            | DM Sans          | Redondas | Sólido   |
| **Ember**        | Fondo marrón oscuro, acento naranja                                          | Space Grotesk    | Suaves   | Sólido   |
| **Forest**       | Fondo verde oscuro, acento menta                                             | Work Sans        | Suaves   | Suave    |
| **Linen**        | Fondo crema, acento terracota                                                | Fraunces         | Redondas | Sólido   |
| **Violet**       | Fondo púrpura oscuro, acento lavanda                                         | Manrope          | Suaves   | Suave    |

Un tema es un punto de partida, no un modo. En cuanto editas a mano un color, la tipografía, las esquinas o el estilo de botón, la tarjeta se deselecciona y aparece una insignia **Personalizado** bajo la cuadrícula. Haz clic otra vez en cualquier tema para volver a una paleta conocida.

***

**Paso 3:** Baja a la tarjeta **Colores**. Tiene tres selectores: **Fondo**, **Texto** (el texto encima) y **Color de marca** (botones, opciones seleccionadas, el indicador de progreso). Haz clic en un selector para abrirlo. Dentro tienes muestras predefinidas, una entrada de color **Personalizado**, un campo **Hex** donde puedes escribir un valor como `#1f6feb`, y **Restablecer diseño**, que devuelve ese color concreto a sin definir.

Bajo los selectores, dos indicadores califican el par de colores que de verdad se renderiza, usando la razón de contraste de la WCAG:

* **Texto sobre fondo**: tu color de texto contra tu fondo. Los pares buenos muestran **AA** o **AAA** con la razón (por ejemplo AAA 16.6:1).
* **Texto del botón**: la etiqueta del botón contra tu acento. Solo se muestra mientras el estilo de **Botón** es **Sólido**, porque los botones de **Contorno** y **Suave** ponen la etiqueta sobre el fondo del formulario.

Cuando un par es demasiado débil, el panel dice **Por debajo de AA: difícil de leer.** y ofrece un arreglo de un clic: **Usar #656f77** (el color legible más cercano). Los colores siempre se renderizan exactamente como los elegiste; la sugerencia es un consejo, no una corrección.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-baf86d1b4e9428e5d3f86f2c06cd2674f153edf9%2Fforms-themes-colors-background-02-contrast-check.png?alt=media" alt="La tarjeta Colores con los selectores Fondo, Texto y Color de marca y el indicador de contraste junto a Texto y Color de marca resaltado"><figcaption><p>Un color de texto que no pasa: la razón se pone roja, aparece un aviso con un color sugerido, y la nota explica que la paleta ya no sigue el ajuste claro u oscuro del visitante.</p></figcaption></figure>

> **⚠️ Nota:** **Elegir un fondo fija el formulario a esta paleta. Deja de seguir el ajuste claro u oscuro del visitante.** Un formulario nuevo arranca con el tema **dForms**: fondo blanco, texto casi negro y color de marca verde, así que ya tiene fondo. Un formulario creado antes de octubre de 2026 sin color de fondo tampoco se adapta: todos los que responden lo ven en tema oscuro. En el momento en que defines un **Fondo**, el formulario usa siempre tus colores, claros u oscuros. Limpia el fondo con **Restablecer diseño** dentro del selector para volver al tema oscuro por defecto.

> **💡 Tip:** Al acento se le exige un listón más bajo (3:1) porque no se dibuja texto en el color de acento. Si tu acento está demasiado cerca del fondo recibes un aviso más suave: el formulario sigue siendo legible, pero una opción seleccionada y el botón pueden costar de distinguir.

***

**Paso 4:** Sigue en la tarjeta **Colores** y elige un **Estilo de fondo**: **Plano**, **Degradado**, **Resplandor** o **Imagen**. Elegir **Imagen** revela dos campos más: **URL de la imagen** (pega un enlace público a la foto) y atenuación de la imagen (de 0 a 100). La capa de atenuación va entre la foto y el formulario para que el texto siga siendo legible: usa tu color de fondo, así que oscurece la foto en un tema oscuro y la aclara en uno claro.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-fad400cfe169e581ad4ca8720ca2d40cc432454c%2Fforms-themes-colors-background-03-background-image.png?alt=media" alt="Estilo de fondo puesto en Imagen, con los campos de URL de la imagen y atenuación llenos y la vista previa mostrando una foto detrás del formulario"><figcaption><p>Fondo <strong>Imagen</strong> con la atenuación en 60. La vista previa muestra la foto detrás de la tarjeta de pregunta.</p></figcaption></figure>

| Estilo de fondo | Qué ve quien responde                                                                                                                                                                                                                                                |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Plano**       | Un solo color liso (tu **Fondo**).                                                                                                                                                                                                                                   |
| **Degradado**   | Un tinte suave del acento arriba que se funde con tu color de fondo.                                                                                                                                                                                                 |
| **Resplandor**  | Un resplandor suave del color de acento en la parte de arriba de la página, sobre tu color de fondo.                                                                                                                                                                 |
| **Imagen**      | Tu foto, a pantalla completa, con una capa de tu color de fondo encima. Necesita una **URL de la imagen**; usa la atenuación para controlar la fuerza de la capa (0 = foto totalmente visible, 100 = foto totalmente tapada; los formularios nuevos arrancan en 55). |

***

**Paso 5:** Haz clic en **Publicar** para poner la nueva apariencia en el formulario en vivo, y luego usa **Abrir formulario** para comprobarla en una pantalla real.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-db1bead3f84fe83853f40d9b10cac53fd974c827%2Fforms-themes-colors-background-04-public-image-background.png?alt=media" alt="El formulario publicado en escritorio con una foto de fondo detrás de la tarjeta de pregunta"><figcaption><p>El formulario publicado con un fondo de imagen. La tarjeta de pregunta conserva su propio color de fondo para que los campos sigan siendo legibles.</p></figcaption></figure>

> **💡 Tip:** Los enlaces de imagen tienen que empezar por `https://`. Si la URL no es un enlace de imagen permitido, el campo muestra **Este protocolo de URL no está permitido para imágenes.** y no se aplica nada.

## Qué sigue

* [Tipografía y controles](/dapta-docs-es/dforms/design/typography-and-controls.md): la tipografía, las esquinas, el estilo de botón y el indicador de progreso.
* [Logos, distribución y transiciones](/dapta-docs-es/dforms/design/logos-layout-transitions.md): añade tu logo y define alineación y ancho.
* [Kit de marca (para todo el workspace)](/dapta-docs-es/dforms/design/brand-kit.md): guarda los colores una vez y aplícalos a cada formulario.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.dapta.ai/dapta-docs-es/dforms/design/themes-colors-background.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.