Tema del Widget

Descripción general

El sistema de temas del widget te permite adaptar su apariencia al lenguaje de diseño de tu producto. Todos los ajustes se configuran en Studio › Editor de Widget › Tema y se guardan por widget. Los cambios se aplican de inmediato a cada nuevo visitante — sin necesidad de redespliegue.

Internamente, el tema se almacena como parte de la configuración del widget en la base de datos y se entrega al iframe integrado al cargarse. El iframe inyecta entonces un conjunto de propiedades CSS personalizadas en :root que todos los componentes de la UI del widget referencian. Esto significa que el sistema visual completo — fondos, bordes, texto, sombras — se adapta en un solo paso sin ningún JavaScript en tiempo de ejecución.

Esquema de color

El selector de esquema de color tiene tres opciones. Elige la que mejor encaje con el contexto donde aparece tu widget.

Fondo

El campo de fondo sobreescribe el fondo por defecto del panel para el esquema seleccionado. Afecta al contenedor más externo del widget y se propaga a las capas de superficie (--wg-s1 a --wg-s4), que se calculan automáticamente mezclando tu color personalizado con pasos de transparencia.

El editor muestra 8 presets curados que encajan con el esquema activo — neutros más oscuros para el modo oscuro, neutros más claros para el modo claro. También puedes escribir cualquier valor hex directamente o usar el selector de color.

Sombra

El slider de sombra controla el drop-shadow del panel flotante. Hay cinco niveles. El valor por defecto es Media (2), que corresponde al comportamiento original antes de introducir los temas.

Color primario

El color primario es tu color de marca principal. Se aplica a:

• El fondo del botón lanzador flotante
• El tinte del header (el fondo es el color primario al 8% de opacidad)
• El punto de color en el header
• El acento del botón de voto cuando el usuario ha votado
• El botón CTA "Enviar idea" al final de la lista de ideas
• El botón "Publicar idea" en el formulario de nueva idea
• Los anillos de foco de los inputs

También puedes escribir cualquier color hex de 6 dígitos válido en el campo de texto o hacer clic en la muestra de color para abrir el selector de color nativo.

Color secundario

El color secundario complementa al primario y se usa para:

• El subrayado de la pestaña activa en la barra de pestañas
• Los hipervínculos dentro del contenido de los anuncios

Si se deja vacío, el color secundario toma por defecto el color primario, de modo que ambos siempre estarán sincronizados a menos que los diferencies explícitamente.

Oscuro vs. Claro — comparativa

El mismo color primario (#3fcf8e) en ambos esquemas para ilustrar cómo los tokens de fondo, superficie y texto se adaptan automáticamente:

Observa que las tarjetas de superficie, el texto, los bordes y el subrayado de pestaña cambian automáticamente — solo el color primario permanece igual.

Guía paso a paso en Studio

Sigue estos pasos para configurar el tema de un widget:

1. 1

   Abre el Editor de Widget

   Navega a Studio › tu proyecto › Editor de Widget. Selecciona el widget que quieres personalizar en el panel izquierdo, o crea uno nuevo.

2. 2

   Entra en modo edición

   Haz clic en el menú de tres puntos de una fila de widget y elige Editar widget, o haz doble clic en la fila. El panel de configuración se abre por la derecha.

3. 3

   Abre el panel de Tema

   En el panel de configuración haz clic en la fila TEMA. El esquema actual y el color primario se muestran en el subtítulo.

4. 4

   Selecciona un esquema de color

   Elige Claro, Oscuro o Auto. La vista previa del navegador se actualiza de inmediato.

5. 5

   Opcionalmente, personaliza el fondo

   Si el valor por defecto del esquema es demasiado intenso o demasiado suave, elige uno de los presets o escribe un valor hex personalizado. La jerarquía de superficies se ajusta automáticamente.

6. 6

   Ajusta el nivel de sombra

   Arrastra el slider de sombra de 0 (sin sombra) a 4 (dramática). La vista previa se actualiza en tiempo real.

7. 7

   Establece los colores de marca

   Elige un Color primario (botón lanzador, CTA, acentos) y opcionalmente un Color secundario (subrayados de pestaña, enlaces). Ambos admiten presets, entrada hex y selector de color.

8. 8

   Guardar

   Haz clic en Guardar en la esquina superior derecha. Los cambios se aplican en tiempo real a todas las nuevas cargas del widget — sin necesidad de redespliegue.

Referencia de variables CSS

Las siguientes propiedades CSS personalizadas se inyectan en :root dentro del iframe del widget. Se calculan a partir de tus ajustes de tema al cargar la página y no están disponibles en la página host (viven dentro del documento del iframe). Esta sección es solo de referencia — no necesitas definirlas manualmente.

/* These CSS custom properties are injected on :root by the widget iframe */

--wg-bg         /* Main panel background                          */
--wg-s1         /* Surface level 1 (header, footer bars)          */
--wg-s2         /* Surface level 2 (hover states)                 */
--wg-s3         /* Surface level 3 (input backgrounds, chips)     */
--wg-s4         /* Surface level 4 (scrollbar thumb, deep fills)  */
--wg-text       /* Primary text color                             */
--wg-muted      /* Secondary text (labels, meta)                  */
--wg-dimmer     /* Tertiary text (timestamps, placeholders)        */
--wg-border     /* Subtle border                                   */
--wg-border-md  /* Medium border (inputs, cards)                  */
--wg-shadow     /* Panel box-shadow string                         */
--wg-secondary  /* Secondary brand color (tab underlines, links)   */