Motor de Temas 2.0
La sección Temas permite consultar, editar y aplicar temas visuales versionados para el tenant. El área incluye un catálogo local, una posible tienda de temas y Theme Studio, donde se trabaja sobre un
La sección Temas permite consultar, editar y aplicar temas visuales versionados para el tenant. El área incluye un catálogo local, una posible tienda de temas y Theme Studio, donde se trabaja sobre un borrador antes de guardarlo o publicarlo.
Alcance de esta guía
Los valores de colores y los nombres mostrados en las capturas pertenecen a temas de ejemplo. Cada instalación puede tener temas, versiones y un catálogo diferentes.
Panel de Temas
La cabecera identifica la zona como TEMAS y resume su propósito: migrar, editar, previsualizar, publicar y restaurar temas del tenant.
En la parte superior se muestran tres indicadores:
- Activo: tema aplicado actualmente al usuario o tenant. En el ejemplo es
Nexo Foundation. - Locales: número de temas cargados en la ruta indicada por la interfaz,
/themesen la captura. - Tienda: cantidad de temas disponibles en el catálogo remoto. El ejemplo no tiene ninguno.
Theme Studio
El estudio ofrece tres vistas:
- Catálogo: temas disponibles para consultar.
- Tienda: catálogo remoto, cuando existen temas publicados para la instalación.
- Theme Studio: edición y previsualización de un tema.
En el ejemplo se está editando Farmers Market, identificado como tema v2. La propia interfaz avisa de dos efectos importantes:
- Guardar mantiene el mismo slug del tema.
- Publicar reemplaza la versión publicada y archiva el estado anterior.
La previsualización se muestra en vivo y señala si existen cambios sin guardar. Desde esa zona también aparecen Volver al catálogo y Aplicar publicado, que permiten salir de la edición o volver a aplicar la versión publicada.
Editar un tema
Al abrir un tema en borrador se muestra el formulario de edición. La pantalla incluye las acciones Guardar y Publicar en la esquina superior derecha.
Identidad del tema
Los primeros campos definen la información básica:
- Nombre: nombre visible del tema.
- Preset: preset de partida seleccionado para el tema; el ejemplo usa
Enterprise. - Descripción: explicación breve del estilo, como la descripción de
Farmers Market.
El encabezado identifica el estado del documento como Borrador / Tema v2. Mientras se trabaja en este estado, conviene guardar los cambios antes de abandonar la página y publicar solo cuando la previsualización haya sido revisada.
Foundations · Color
La sección de fundamentos contiene los tokens principales de color:
| Token | Función indicada por el editor |
|---|---|
| Primary | Color primario del tema. |
| Secondary | Color secundario. |
| Action | Color para acciones destacadas. |
| Canvas | Color del lienzo o fondo principal. |
| Surface | Color de superficies y paneles. |
| On primary | Color del contenido colocado sobre el color primario. |
El editor muestra cada token con una muestra de color y su valor hexadecimal. Los valores visibles en la captura son configurables y no deben tomarse como una paleta fija de NexGestión.
Estados, datos y recetas
El editor agrupa más variables para mantener una apariencia coherente:
- Estados: colores de éxito, aviso, error e información, con sus fondos y bordes.
- Visualización de datos: colores de las series, la rejilla y los ejes de gráficos.
- Tipografía: valores de texto para display, body y label.
- Radios: tamaños de redondeo SM, MD y LG.
- Recipes: recetas visuales para elementos como botones, tarjetas y tablas.
El objetivo es editar el sistema visual desde sus tokens, en vez de cambiar cada componente de forma aislada.
Catálogo de temas
El catálogo presenta tarjetas con la identidad, descripción, muestras de color y una pequeña previsualización de cada tema.
En cada tarjeta pueden aparecer:
- El nombre y el slug del tema.
- La versión, por ejemplo
V2. - El estado Borrador, cuando existe una edición pendiente.
- El contador de versiones.
- Muestras de la paleta y una previsualización del componente Sidebar Clickup.
- Aplicar, para aplicar el tema disponible.
- Editar en Studio, para abrirlo en el editor.
En la captura aparecen Aqua Mint y Atlas Command 2.0. Son ejemplos del catálogo local; su presencia y estado pueden variar entre tenants.
Flujo recomendado
- Revisa el tema activo y el catálogo desde Temas.
- Abre un tema existente o inicia un borrador en Theme Studio.
- Ajusta primero la identidad, el preset y los fundamentos de color.
- Comprueba estados, gráficos, tipografía, radios y recetas.
- Revisa la previsualización en vivo y confirma que no quedan cambios sin guardar.
- Pulsa Guardar para conservar el borrador.
- Pulsa Publicar solo cuando quieras sustituir la versión publicada.
- Si necesitas volver atrás, utiliza la gestión de versiones o restauración disponible para ese tema.
Publicar cambia la versión activa
Según el aviso del editor, publicar reemplaza la versión publicada y archiva el estado anterior. Hazlo después de validar la previsualización y coordinar el cambio con el equipo que utiliza el tenant.
La zona de temas controla la identidad visual; la configuración funcional de la instancia se explica en Administración general, y la navegación de trabajo del usuario en Temas del CRM.