# Apariencia y personalización

Personaliza tu formulario con colores, fuentes, presets, temas de espacio de trabajo compartidos, imágenes de portada y modo oscuro.

## Apariencia y personalización

Colores, fuentes, presets, imágenes de portada y modo oscuro. Haz que cada formulario sea una parte natural de tu marca.

<h2 id="theme-panel">Panel de tema</h2>
<p>
  Haz clic en <strong>Tema</strong> (icono de paleta) en la barra de herramientas superior. El panel se ancla a la derecha y muestra los
  cambios al instante.
</p>
<p>
  El interruptor <strong>Modo</strong> (Claro / Oscuro) en la parte superior del panel cambia el esquema de color que estás editando. Cada
  modo guarda sus propios valores de tema, por lo que puedes ajustar ambos de forma independiente.
</p>
<p>
  El selector <strong>Tema</strong>, debajo, muestra primero tus temas del espacio de trabajo para ese modo y luego los preajustes
  integrados. El pie de página muestra <strong>Todos los cambios guardados</strong> hasta que edites algo; entonces aparecen{' '}
  <strong>Descartar</strong> y <strong>Guardar</strong>.
</p>

<h2 id="presets">Preajustes</h2>
<p>
  El selector de temas incluye siete preajustes para modo claro y nueve para modo oscuro. Cada uno aplica un conjunto completo de colores
  coordinados, una fuente y un redondeo de esquinas con un solo clic.
</p>
<ul>
  <li>
    <strong>Tema formbase predeterminado</strong> — se aplica automáticamente a cada formulario nuevo, uno por modo
  </li>
  <li>
    <strong>Preajustes</strong> — los temas seleccionados que se muestran a continuación
  </li>
  <li>
    <strong>Personalizado</strong> — "Solo este formulario". Lo que muestra el selector en cuanto cambias cualquier valor a mano
  </li>
</ul>

> ℹ️ **Disponible en Gratis**
> <p>
>     Los temas personalizados, incluidos los preajustes y la personalización independiente de los modos claro y oscuro, están disponibles en
>     todos los planes. Consulta <a href="/es/subscription-billing/plans-pricing">planes y precios</a>.
>   </p>

<h3 id="light-presets">Preajustes de modo claro</h3>

<h3 id="dark-presets">Preajustes de modo oscuro</h3>

<h2 id="workspace-themes">Temas del espacio de trabajo</h2>
<p>
  Un tema del espacio de trabajo es un tema con nombre para un modo, claro u oscuro, que comparten varios formularios. Úsalo para mantener
  todos los formularios fieles a tu marca: cambia el tema una vez y todos los formularios que lo usan se actualizan. Para aplicar tema a
  ambos modos, mantén dos, como <em>Acme Claro</em> y <em>Acme Oscuro</em>.
</p>

<h3 id="create-workspace-theme">Crear un tema del espacio de trabajo</h3>
<ol>
  <li>
    Abre el panel de tema en un formulario, elige Claro u Oscuro, y elige un preajuste o ajusta los colores hasta que el formulario se vea
    como quieres.
  </li>
  <li>
    Haz clic en <strong>Guardar como tema del espacio de trabajo</strong> debajo del selector de temas y dale un nombre, como el de tu
    empresa.
  </li>
</ol>
<p>Ese modo del formulario ahora está vinculado al nuevo tema. El selector muestra su nombre y cuántos formularios lo usan.</p>

<h3 id="use-workspace-theme">Úsalo en otro formulario</h3>
<p>
  Abre el panel de tema en el otro formulario, elige el tema en <strong>Temas del espacio de trabajo</strong> y haz clic en{' '}
  <strong>Guardar</strong>. El selector solo muestra los temas del espacio de trabajo para el modo que estás editando, así que vincula los
  modos claro y oscuro por separado.
</p>

<h3 id="edit-workspace-theme">Editar un formulario vinculado</h3>
<p>
  Un formulario vinculado se edita como cualquier otro. En cuanto tus cambios difieren del tema del espacio de trabajo, el pie de página te
  pregunta dónde guardarlos:
</p>
<ul>
  <li>
    <strong>Guardar en [nombre del tema]</strong> actualiza el tema del espacio de trabajo y todos los formularios vinculados a él.
  </li>
  <li>
    <strong>Guardar solo para este formulario</strong> conserva el cambio en este formulario. Ese modo deja de seguir el tema del espacio de
    trabajo y pasa a ser un tema personalizado.
  </li>
</ul>
<p>
  Aplicar un preajuste a un modo vinculado también lo desvincula. Para volver a vincularlo, elige el tema del espacio de trabajo en el
  selector y guarda.
</p>

> ℹ️ **Los formularios publicados se actualizan en su próxima publicación**
> <p>
>     Guardar un tema del espacio de trabajo cambia de inmediato el borrador de todos los formularios vinculados. Los encuestados ven el nuevo
>     aspecto después de que cada formulario se publique de nuevo, igual que con cualquier otro cambio. Hasta entonces, los formularios
>     vinculados muestran <strong>Publicar cambios</strong>.
>   </p>

<h3 id="manage-workspace-themes">Renombrar o eliminar</h3>
<p>
  En un formulario vinculado, abre el menú <strong>⋯</strong> junto al selector de temas. <strong>Renombrar</strong> cambia el nombre en
  todos los lugares donde se usa el tema. <strong>Eliminar</strong> quita el tema; los formularios que lo usaban conservan su aspecto actual
  como tema personalizado.
</p>

<h2 id="theme-sections">Controles del tema</h2>

<p>
  Elige un preajuste o un tema del espacio de trabajo y luego ajusta la tipografía y los colores. Cada color describe un propósito en lugar
  de un componente concreto. Por ejemplo, cambiar <strong>Texto</strong> actualiza a la vez el texto de la página, los títulos de las
  preguntas, el texto de los campos y el texto de las opciones. Pasa el cursor sobre el nombre de un color para ver qué controla. Un punto
  marca los colores que has cambiado pero no has guardado.
</p>

<h3 id="typography">Tipografía</h3>

<h3 id="colors">Colores</h3>

<p>Los colores se agrupan según dónde aparecen en el formulario.</p>

<p>
  El grupo Valoración también tiene <strong>Tamaño de estrella</strong>, el tamaño visual de las estrellas de valoración, en píxeles, de 12
  a 48.
</p>

<h2 id="fonts">Fuentes</h2>
<p>formbase incluye once familias tipográficas. La fuente que elijas en Tipografía se aplica a todo el texto del formulario.</p>

<h2 id="cover-logo">Imagen de portada y logotipo</h2>
<p>
  La imagen de portada y el logotipo se sitúan en la parte superior del lienzo. Se configuran directamente en el lienzo, no dentro del panel
  de tema. Para ver el proceso paso a paso, consulta{' '}
  <a href="/es/building-forms/understanding-the-editor#cover-logo">Entender el editor → Portada y logotipo</a>.
</p>
<h2 id="dark-mode">Modo oscuro</h2>
<p>formbase admite el modo oscuro en dos lugares: el panel de control y los formularios publicados.</p>

<h3 id="dark-mode-dashboard">Panel de control</h3>
<p>
  Activa el modo oscuro desde el menú de usuario en la parte inferior de la barra lateral. El ajuste se aplica a tu cuenta en todos los
  dispositivos.
</p>

<h3 id="dark-mode-published">Formularios publicados</h3>
<p>
  Los formularios publicados siguen por defecto las preferencias del sistema del respondente. Si su dispositivo está en modo oscuro, el
  formulario se muestra en modo oscuro.
</p>

<h3 id="dark-mode-theming">Configurar ambos modos</h3>
<p>
  Si solo configuras un tema claro, el formulario usa los colores oscuros predeterminados de formbase cuando el modo oscuro está activo.
  Para un control total, configura ambos esquemas de color con el alternador claro/oscuro en la parte superior del panel de tema.
</p>
<p>
  Cuando cambias entre <strong>Claro</strong> y <strong>Oscuro</strong> en el panel de tema, el panel de control cambia para coincidir. Esto
  te permite previsualizar tu tema en contexto mientras editas.
</p>

<h2 id="examples">Patrones de personalización comunes</h2>

<ul>
  <li>
    <strong>Combina con tu marca</strong> — elige la fuente de tu marca, ajusta el color Botón a tu color de marca principal y sube tu
    logotipo. Usa un preajuste como punto de partida y luego guarda el resultado como un tema del espacio de trabajo para que todos los
    formularios lo compartan.
  </li>
  <li>
    <strong>Encuesta con modo oscuro prioritario</strong> — fuerza el modo oscuro desde los ajustes de incrustación al compartir, y luego
    personaliza el esquema de color oscuro para una mejor legibilidad. Usa un acento de alto contraste para el color de valoración activo,
    de modo que las estrellas resalten sobre fondos oscuros.
  </li>
  <li>
    <strong>Incrustación minimalista</strong> — ajusta el color Fondo para que coincida con tu sitio web, oculta la imagen de portada y el
    logotipo en los ajustes de incrustación, usa un color Borde discreto y reduce el radio de esquina a 0.
  </li>
  <li>
    <strong>Cuestionario divertido</strong> — elige Comic Sans MS, sube el radio de esquina hacia 32 para formas de píldora, usa un color
    Seleccionado llamativo y añade una imagen de portada desde la pestaña Unsplash del selector de portada.
  </li>
</ul>
<h2 id="branding">Marca</h2>
<p>
  Por defecto, los formularios publicados muestran un pequeño distintivo de formbase. Puedes desactivarlo con el ajuste{' '}
  <strong>Mostrar marca de formbase</strong> en <strong>Configuración del formulario → General</strong>. Eliminar el distintivo requiere un
  plan Pro o Business — consulta <a href="/es/subscription-billing/plans-pricing">planes y precios</a>.
</p>

> 💡 **Prueba los modos claro y oscuro antes de publicar**
> <p>
>     Previsualiza tu formulario con el modo oscuro del sistema activado antes de publicarlo. El contraste del logotipo y los colores de
>     acento suelen necesitar un ajuste para la variante oscura — especialmente las imágenes de portada y los colores de botón que quedan bien
>     sobre un fondo claro pero se pierden sobre uno oscuro.
>   </p>

<h2 id="next-steps">Próximos pasos</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Configuración de idioma](/es/building-forms/language-setting) — Sirve tu formulario en cualquier idioma
  - [Carga de archivos y firmas](/es/building-forms/file-uploads-signatures) — Acepta documentos y firmas electrónicas
  - [Protección contra bots](/es/building-forms/captcha-bot-protection) — Bloquea el spam con Cloudflare Turnstile
  - [Enlaces para compartir](/es/sharing-publishing/sharing-embedding) — Crea y gestiona URLs de enlaces para compartir
</div>
