Estilos del widget con variables CSS
Adapta los colores, el radio de las esquinas y las sombras del widget de soporte a tu marca con sus diez variables CSS.
Actualizado el . 2 min de lectura
Incluido en los planes Profesional y Avanzado. Ver precios
El widget de soporte guarda sus estilos dentro de su propio elemento, así que las reglas CSS de tu web no le afectan ni él afecta a tu web. Para adaptarlo a tu marca expone diez variables CSS que puedes cambiar desde tu hoja de estilos, apuntando al elemento utilia-support.
Cambiar las variables
utilia-support {
--utilia-primary: #0f766e;
--utilia-primary-hover: #115e59;
--utilia-radius: 8px;
}Basta con definir las que quieras cambiar; el resto conserva su valor por defecto. Funciona igual con las tres formas de instalación, porque todas crean el mismo elemento.
Variables disponibles
| Variable | Valor por defecto | Dónde se usa |
|---|---|---|
--utilia-primary | #2563eb | Botón flotante, botones principales, mensajes de tu usuario y borde de los campos activos. |
--utilia-primary-hover | #1d4ed8 | Los mismos elementos al pasar el puntero. |
--utilia-bg | #ffffff | Fondo del panel. |
--utilia-bg-secondary | #f8fafc | Fondos secundarios: respuestas de tu equipo, adjuntos y sugerencias de la IA. |
--utilia-text | #1e293b | Texto principal. |
--utilia-text-secondary | #64748b | Textos de apoyo, fechas y pistas. |
--utilia-border | #e2e8f0 | Bordes y separadores. |
--utilia-radius | 12px | Radio de las esquinas del panel. |
--utilia-shadow | Sombra suave | Reservada: hoy ningún elemento la usa. |
--utilia-shadow-lg | Sombra amplia | Sombra del botón flotante y del panel. |
Tema oscuro
Con el tema dark (atributo data-theme="dark" en la etiqueta de script, theme="dark" en el componente web o theme: 'dark' por npm), el widget cambia cinco variables:
| Variable | Valor en el tema oscuro |
|---|---|
--utilia-bg | #1e293b |
--utilia-bg-secondary | #334155 |
--utilia-text | #f8fafc |
--utilia-text-secondary | #94a3b8 |
--utilia-border | #475569 |
El tema auto todavía no sigue la preferencia del sistema: se pinta como el claro. Si tu web tiene modo oscuro, elige el tema desde tu código según el modo activo, o redefine tú las variables:
@media (prefers-color-scheme: dark) {
utilia-support {
--utilia-bg: #1e293b;
--utilia-bg-secondary: #334155;
--utilia-text: #f8fafc;
--utilia-text-secondary: #94a3b8;
--utilia-border: #475569;
}
}Lo que no se puede cambiar
La tipografía es la del sistema del dispositivo, el botón flotante mide 56 píxeles y queda a 20 píxeles de los bordes de la pantalla. No hay variables para estos valores.
Siguiente paso
Comprueba el resultado abriendo el formulario de ticket nuevo, que es donde más colores intervienen. Si algo no se ve como esperas, revisa los problemas frecuentes.