---
language: es
title: Cómo personalizar los colores del widget de TuCalendi
category: Widget
summary: Aprende a modificar los colores del widget con una plantilla de tema para adaptarlo a la imagen de marca de tu negocio.
---

# Cómo personalizar los colores del widget de TuCalendi

Este tutorial explica cómo personalizar los **colores del widget de TuCalendi** mediante una **plantilla de tema**. Los colores definen la identidad visual del widget y te permiten adaptarlo a la **imagen de marca** de cada negocio.

Cuando creas una nueva plantilla de tema, todos los campos de color se rellenan automáticamente con la **configuración predeterminada**. A partir de ahí, puedes modificar cada color por separado hasta conseguir el aspecto que buscas.

El widget tiene seis campos de color individuales y un campo adicional para el tema general:

- **Color primario**. El color principal de la interfaz: botones, días y elementos destacados.
- **Color secundario**. Color de acento para los elementos secundarios.
- **Color del texto principal**.
- **Color del texto secundario**.
- **Color destacado**. Se usa para resaltar elementos dentro del widget.
- **Color de fondo**.
- **Tema de color**. Modo visual general: Automático, Claro u Oscuro.

## Antes de empezar

Para seguir este tutorial, tienes que ir a la sección **Apariencia** del widget y tener creada una plantilla de tema que puedas editar. El proceso completo para crear y asignar plantillas se explica en el tutorial general sobre [cómo crear y asignar una plantilla de tema del widget](https://www.tucalendi.com/en/s/widget/how-to-customize-the-appearance-of-the-new-tucalendi-widget).

## Paso 1. Accede a la configuración de apariencia del widget

Desde el menú lateral de TuCalendi, ve a la sección **"Widgets"** y selecciona la opción **"Apariencia"**.

![Apariencia del widget](https://www.tucalendi.com/images/content/widget/en/widget-appearance.png)

## Paso 2. Crea o edita una plantilla de apariencia del widget

Dentro de la sección **"Apariencia"**, crea una nueva plantilla o edita una existente haciendo clic en **"Editar"**.

![Editar la apariencia del widget](https://www.tucalendi.com/images/content/widget/en/edit-widget-apperance-template.png)

## Paso 3. Revisa la configuración de colores predeterminada

Cuando creas una nueva plantilla, todos los campos de color se rellenan automáticamente con **valores predeterminados**. En la siguiente captura puedes ver cómo se ve el editor con la configuración de colores predeterminada.

![Plantilla de apariencia del widget predeterminada](https://www.tucalendi.com/images/content/widget/en/widget-appearance-template-by-default.png)

## Paso 4. Personaliza los colores de la plantilla

Haz clic en cualquiera de los campos de color para abrirlo y selecciona el valor que quieras. Puedes modificar cada campo de forma independiente:

- **Color primario**: afecta a los botones principales, a los días seleccionados en el calendario y a los elementos más destacados de la interfaz.
- **Color secundario**: se aplica a los elementos de apoyo de la interfaz.
- **Color del texto principal**: controla el color del texto principal visible en el widget.
- **Color del texto secundario**: controla el color del texto secundario, como descripciones y etiquetas.
- **Color destacado**: se usa para resaltar elementos especiales, como notificaciones o acciones importantes.
- **Color de fondo**: define el color de fondo del widget.
- **Tema de color**: te permite elegir entre **Automático** (el widget adapta su apariencia al modo claro u oscuro del sistema del usuario), **Claro** (siempre en modo claro) u **Oscuro** (siempre en modo oscuro).

La siguiente captura muestra el editor con los colores de TuCalendi aplicados como ejemplo de personalización.

![Plantilla de apariencia del widget con los colores de TuCalendi](https://www.tucalendi.com/images/content/widget/en/widget-appearance-template-tucalendi-colors.png)

## Paso 5. Guarda los cambios

Después de configurar todos los colores que quieras, haz clic en **"Guardar"** para aplicar los cambios a la plantilla de tema.

## Paso 6. Comprueba la asignación del elemento

Una vez guardada la plantilla, comprueba que esté **asignada** al **hub** o a la **encuesta con enrutamiento** correspondiente. Si la plantilla no está asignada a ningún elemento, los cambios no se verán reflejados en ningún widget.

![Plantilla de apariencia del widget con elemento asignado](https://www.tucalendi.com/images/content/widget/en/widget-appearance-template-with-element.png)

## Paso 7. Comprueba el resultado en el widget

Cuando hayas configurado los colores y guardado los cambios, el widget mostrará la nueva **paleta de colores** en todas sus pantallas. La siguiente captura muestra cómo se ve la personalización de colores en el widget que ve el usuario final.

![Widget con los colores de TuCalendi](https://www.tucalendi.com/images/content/widget/en/widget-with-tucalendi-colors.png)

## Resumen del proceso

Para personalizar los colores del widget, ve a **"Apariencia del widget"**, crea o edita una plantilla y modifica los campos de color disponibles: Color primario, Color secundario, Color del texto principal, Color del texto secundario, Color destacado, Color de fondo y Tema de color. Al crear una nueva plantilla, todos los campos se rellenan con valores predeterminados que puedes modificar libremente. Haz clic en **"Guardar"**, comprueba que la plantilla esté asignada al hub o a la encuesta correspondiente y revisa cómo se ve el widget después de personalizar los colores.