---
language: en
title: How to Customize the Colors of the TuCalendi Widget
category: Widget
summary: Learn how to adjust the widget colors in a theme template to match your brand, from primary color to background and color theme.
---

# How to Customize the Colors of the TuCalendi Widget

This tutorial explains how to customize the **colors of the TuCalendi widget** using a **theme template**. The colors determine the widget's **visual identity** and allow you to adapt it to each business's **brand image**.

When you create a new theme template, all color fields are automatically populated with **default settings**. From there, you can modify each color individually to achieve the desired look.

The widget has six individual color fields and an additional field for the overall theme:

- **Primary color**. The main color of the interface: buttons, days, and highlighted elements.
- **Secondary color**. Accent color for secondary elements.
- **Main text color**.
- **Secondary text color**.
- **Highlight color**. Used to highlight elements within the widget.
- **Background color**.
- **Color theme**. General visual mode: **Auto**, **Light**, or **Dark**.

## Before You Begin

To follow this tutorial, you must navigate to the widget's **Appearance** section and have a theme template created that you can edit. The complete process for creating and assigning templates is explained in the general tutorial on [how to create and assign a widget theme template](https://www.tucalendi.com/en/s/widget/how-to-customize-the-appearance-of-the-new-tucalendi-widget).

## Step 1. Access the widget's appearance settings

From the TuCalendi side menu, go to the **"Widgets"** section and select the **"Appearance"** option.

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

## Step 2. Create or edit a widget appearance template

Within the **"Appearance"** section, create a new template or edit an existing one by clicking **"Edit"**.

![Edit widget appearance](https://www.tucalendi.com/images/content/widget/en/edit-widget-apperance-template.png)

## Step 3. Review the default color settings

When you create a new template, all color fields are automatically filled with **default values**. The screenshot below shows what the editor looks like with the default color settings.

![Widget appearance template by default](https://www.tucalendi.com/images/content/widget/en/widget-appearance-template-by-default.png)

## Step 4. Customize the template colors

Click any of the color fields to open it and select the desired value. You can modify each field independently:

- **Primary color**: affects the main buttons, selected days on the calendar, and the most prominent elements of the interface.
- **Secondary color**: applies to supporting elements of the interface.
- **Main text color**: controls the color of the main text visible in the widget.
- **Secondary text color**: controls the color of secondary text, such as descriptions and labels.
- **Highlight color**: used to highlight special elements, such as notifications or important actions.
- **Background color**: defines the widget's background color.
- **Color theme**: allows you to choose between **Auto** (the widget adapts its appearance to the light or dark mode of the user's system), **Light** (always in light mode), or **Dark** (always in dark mode).

The following screenshot shows the editor with TuCalendi's colors applied as an example of customization.

![Widget appearance template with TuCalendi's colors](https://www.tucalendi.com/images/content/widget/en/widget-appearance-template-tucalendi-colors.png)

## Step 5. Save the changes

After configuring all the desired colors, click **"Save"** to apply the changes to the theme template.

## Step 6. Check the element assignment

Once the template is saved, verify that it is **assigned** to the corresponding **hub** or **survey with routing**. If the template is not assigned to any element, the changes will not be reflected in any widget.

![Widget appearance template with element assigned](https://www.tucalendi.com/images/content/widget/en/widget-appearance-template-with-element.png)

## Step 7. Check the result in the widget

Once the colors are configured and the changes are saved, the widget will display the new **color palette** on all its screens. The following screenshot shows how the color customization appears in the widget visible to the end user.

![Widget with TuCalendi's colors](https://www.tucalendi.com/images/content/widget/en/widget-with-tucalendi-colors.png)

## Process Summary

To customize the widget's colors, go to **"Widget Appearance"**, create or edit a template, and modify the available color fields: **Primary Color**, **Secondary Color**, **Main Text Color**, **Secondary Text Color**, **Highlight Color**, **Background Color**, and **Color Theme**. When creating a new template, all fields are populated with default values that you can freely modify. Click **"Save"**, verify that the template is assigned to the corresponding hub or survey, and check how the widget appears after the colors have been customized.