# Colors

{% hint style="info" %}
**Theme settings -> Colors**
{% endhint %}

On the General tab you can customize your theme.

If colors aren't specified in each theme section, use this block's settings for color setup.

## **Base**

This tool allows you to customize the colors of the announcement bar, header line, text, menus, and icons across your store.

In this example, you can see where the Base color will be applied:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FD6wKKkDbpCFq5pNfzoCL%2Fts_colors_base.png?alt=media&#x26;token=1edd5e74-9587-4633-9f16-8f592d7b183a" alt=""><figcaption></figcaption></figure>

***

## **Accent**

Adjust this setting to change the color of buttons, subheadings, and cart notifications when products are added to the cart.

The example below highlights the areas where the color settings will be applied:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FzGeLsUMjyw60uhoEYTgt%2Fts_accent.png?alt=media&#x26;token=f217a5d2-3f04-40d8-a436-7e5a794fe5e3" alt=""><figcaption></figcaption></figure>

***

## **Background**

To change a store's background color, use this option:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FHD15izH6Ov7i0zuYrcYH%2Fts_bg.png?alt=media&#x26;token=6e0d48fa-7e6d-46a5-b82e-105ed2b4cccd" alt=""><figcaption></figcaption></figure>

***

## **Secondary background**

Use the hex code of the item to change the background color for sections where you've chosen the **Color** option in the Background block, but haven't yet applied a color.

This color setting defines the first navigation line's color in the Header and adjusts the background color of text areas in certain blocks.

The following example demonstrates how it may appear in a store:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2Fs5CwdgaTflimT4H5BdFM%2Fts_sec_bg.png?alt=media&#x26;token=aff07e7c-1d6c-436d-8106-61846053df70" alt=""><figcaption></figcaption></figure>

***

## Text

Input:

* Background
* Text
* Borders
* Links

The colors are applied to these elements for consistent styling throughout the document.

* Heading (h1-h6)
* Subheading
* Description
* Text link
* Text link hover
* Alert

***

## Icons

The theme's icon elements are styled with specific colors:

* Text icons
* Link icons
* Link icons hover
* Social icons
* Social icons on hover

***

## Input

The theme applies the colors to the input elements.

* Background
* Border
* Text
* icon
* Background hover
* Border hover
* Outline hover
* Text hover
* Icon hover

***

## Checkbox

In the theme, colors are assigned to checkbox elements:

* Background
* Border
* Text
* Focused background
* Border hover
* Text hover
* Focused icon

***

## Shadow

Set the shadow color for modal elements.

***

## Tooltip

Colors are used to style tooltip elements within the theme:

* Background
* Text

***

## Other

The colors are applied to these elements:

* **Image Overlay Color**: Adjust the color to control the image opacity in each banner section.
* Image Preloader Background
