Theme

This content is not available in your language yet.

El theme system permite personalizar la apariencia del form sin tocar los tokens globales de Cobalt. Vive en el bloque theme del schema (sibling de pages), se aplica como CSS custom properties + data attributes scoped al form.

{
  "title": "Mi Form",
  "theme": {
    "colorScheme": "dark",
    "accent": "custom",
    "accentHex": "#7C3AED",
    "borderRadius": "rounded",
    "density": "comfortable",
    "fontFamily": "Inter, system-ui, sans-serif",
    "background": {
      "color": "#0F1420",
      "imageUrl": "https://example.com/bg.jpg",
      "imageSize": "cover",
      "imageAttachment": "fixed",
      "opacity": 100
    },
    "header": {
      "show": true,
      "backgroundColor": null,
      "height": "180px"
    },
    "customCss": "[data-co-field=\"email\"] co-input { letter-spacing: 0.02em }"
  },
  "pages": [/* … */]
}

Cuatro tabs en el builder

El editor visual expone el theme en 4 sub-tabs cuando seleccionás el scope Form:

Tab	Settings
General	Color scheme (Light/Dark) · Question appearance (Panels/Flat) · Density (Comfortable/Compact) · Border radius (Rounded/Sharp)
Header	Show header toggle · Background color · Height (CSS length)
Background	Background color · Image URL · Image size (auto/contain/cover) · Image attachment (scroll/fixed) · Opacity slider
Appearance	Accent presets (Azul / Verde / Amarillo / Rosado) o custom hex · Font family
Advanced	Custom CSS textarea (escape hatch, sanitizado)

Aplicación scoped

El renderer convierte el theme en:

CSS custom properties sobre el wrapper del form (--co-color-primary-azul, --co-form-header-bg, etc.). Cascadeánan a hijos.
Data attributes (data-theme="dark", data-appearance="flat", data-density="compact", data-radius="sharp", data-has-bg, data-hide-header). CSS los matchea con selectors específicos.
Inline styles para el background-image y background-color del host.
Inyección de <style> scoped cuando hay customCss.

Los tokens globales --co-* quedan intactos — el resto de tu app no se entera de que un form usa accent verde.

Tokens reservados que sobrescribe el theme

Custom property	Cuándo se setea
`--co-color-primary-azul`	Siempre (accent preset o custom hex)
`--co-font-family-primary`	Cuando `theme.fontFamily` está definido
`--co-border-radius-xxs` … `--co-border-radius-xl`	Cuando `theme.borderRadius === 'sharp'` (todos a `0`)
`--co-form-header-bg`	Cuando `theme.header.backgroundColor`
`--co-form-header-height`	Cuando `theme.header.height`

Dark mode

theme.colorScheme: "dark" aplica data-theme="dark" al form. Re-bindea ~15 semantic tokens dentro del scope (surface, text, border) a una paleta dark coherente:

Card surface + input bg: #1a1f2b (mismo color, delineados por border sutil)
Text default: #f9fafb · secondary: #9ca3af
Borders: rgba(255, 255, 255, 0.12)

El builder en sí queda en light — el dark mode solo afecta lo que está dentro del form scope (.co-form-wizard[data-theme="dark"] y form[data-theme="dark"]).

Custom CSS (escape hatch)

Para landing pages embebidas vía iframe donde necesitás match exacto a un brand corporativo:

{
  "theme": {
    "customCss": ".co-form-wizard__title { font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(135deg, #7C3AED, #F32A73); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } [data-co-field-kind=\"select\"] { background: #fafafa; }"
  }
}

Sanitización

sanitizeCustomCss strip-ea:

@import (loading external sheets bypasses CSP)
javascript: URLs
expression(...) (legacy IE CSS-in-JS, code-eval vector)
inline </style> (would break out of the injected style element)

url(http://...) SÍ está permitido (custom fonts, decorative images son casos legítimos).

Class hooks targeteables

Cada field se renderiza con atributos estables que el customCss puede targetear:

<div class="co-form-field-wrap"
     data-co-field="email"
     data-co-field-kind="text">
  <co-input ...></co-input>
</div>

/* Por nombre específico de field */
[data-co-field="email"] co-input { /* ... */ }

/* Por tipo de field */
[data-co-field-kind="select"] { /* todos los selects */ }
[data-co-field-kind="textarea"] co-input { min-height: 200px }

Estos atributos son API pública — no se rompen entre versiones del DS.

Otros class hooks útiles

Selector	Qué matchea
`.co-form-wizard`	Container del wizard
`.co-form-wizard__title-block`	Card del form title
`.co-form-wizard__page-card`	Card de la page activa
`.co-form-wizard__page-head`	Header dentro de la page card
`.co-form-wizard__page-title`	h2 del page title
`.co-form-wizard__page-pill`	Pill “PAGE 1”
`.co-form-wizard__nav`	Footer con Anterior/Siguiente
`.co-form-wizard__title`	h1 del form
`.co-form-wizard__title-desc`	Description del form

Accent

Cuatro presets que mapean al primary palette de Cobalt:

Preset	Hex
`azul`	`#2563EB`
`verde`	`#02A270`
`amarillo`	`#FDBF00`
`rosado`	`#F32A73`

O accent: "custom" + accentHex: "#xxxxxx" para color libre.

El accent ripple-ea: todos los azules tintados (borders selected, focus rings, pills, drop targets) usan color-mix(in srgb, var(--co-color-primary-azul) X%, transparent) para que cambien al unísono.

Question appearance

Modo	Comportamiento
`panels` (default)	Cada page renderiza como card con border + shadow + header propio
`flat`	Strip total del chrome — title + page sin border ni shadow, fields directos sobre el bg

Density

Modo	Cambio
`comfortable`	Gap default (16px entre cards, padding 20-24px)
`compact`	Gap reducido (8-12px), paddings más chicos en header/nav