> For the complete documentation index, see [llms.txt](https://broadcast.presidiocreative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://broadcast.presidiocreative.com/broadcast-v5/theme-settings/theme-settings/colors.md).

# Colors

Settings to adjust the general, heading and footer colors using in the theme

Configure your brand colors in the color settings. These color elements are used in all the general sections, header, and footer.

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/6m7x2fCbpQcQRytkee9Y/settings-colors.gif" alt=""><figcaption><p><strong>Open the Colors accordion to find all the settings</strong></p></figcaption></figure>

{% hint style="info" %}
***Tip***: These are your primary brand colors used throughout the theme. Some sections or blocks have their own color settings for even greater control.&#x20;
{% endhint %}

Here are some common color elements to demonstrate how the color settings work:

## General

### Light background

The light background setting is used for background accents like the coupon message in the cart drawer. It's also used in the free shipping indicator with the bright accent color setting.&#x20;

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/VgHrTDAvmWDeSvD80ahE/light%20background-gray.jpg" alt=""><figcaption></figcaption></figure>

### Bright accent

The bright accent is a highlight color for elements like the free shipping progress bar shown above in red and also the **cart bubble** indicator in the header:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/yqUqHXZutzd4lMwYaz1J/Cart%20indicator%20two.jpg" alt=""><figcaption></figcaption></figure>

### Sale

The sale color is used for the **prices** on product grid listings like collections:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/mGJBKjMBaRi18rIXsqrG/sale%20price%20color.jpg" alt=""><figcaption><p><strong>Sale price</strong></p></figcaption></figure>

* The sale badge uses a different setting, which can be found under the Product grid settings.&#x20;

## Header bar

### Background

The background color adjusts the text inside the **cart bubble** indicator:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/7h2eUEqEbSDQDhHxJXEV/header-bar-background.jpg" alt=""><figcaption></figcaption></figure>

### Links

The social, search, account, cart icons area is adjusted with this setting:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/2Qlo4LYiGQOe10AgqiiQ/header-bar-links.jpg" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Note: When using a transparent header, these colors are used when the dropdown is activated. The transparent header has a separate setting while inactive. That setting is in the next group.&#x20;
{% endhint %}

## Header Navigation

### Links

The links setting adjusts the main header navigation links:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/f7q9P1lfr2uCNgUS1JC0/navigation-links.jpg" alt=""><figcaption></figcaption></figure>

### Dropdown background

For dropdown menus, including the MegaNav, the background color can be adjusted:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/dz8VwvAAhgEFZVOLxAPG/colors-dropdown%20background.jpg" alt=""><figcaption></figcaption></figure>

### Dropdown links

Inside the dropdowns, you can adjust the color of the links:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/Chrnwkcjnj0B0Ru22uaN/navigation-dropdown-links.jpg" alt=""><figcaption></figcaption></figure>

### Transparent header text

When using a transparent header, the main colors in the header area include the social, search, account, and cart icons. Also, main navigation links:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/qXJNZyWcBOjbG3QbS2Z5/colors-Transparent%20header%20text.png" alt=""><figcaption></figcaption></figure>

## Footer

### Background

Adjust the main footer background color:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/GZHvJa9B0czugAOQTZCS/fooder-background.jpg" alt=""><figcaption></figcaption></figure>

### Borders

Border elements are used within the footer for the forms and buttons:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/FF7Wxfxmx1laUmS61A2A/footer-borders.jpg" alt=""><figcaption><p><strong>Red are borders, grey are divider blocks</strong></p></figcaption></figure>

* The **grey** horizontal and vertical lines are "**Divider**" blocks. These have their own color settings within the block.&#x20;

### Text

The default text for content in the footer:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/g3eugpjttKSLhq4ncTF0/footer-text.jpg" alt=""><figcaption></figcaption></figure>

### Links

All the links, including social icons and navigation links:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/Ak6p49A5tTat7H20kLKv/footer-links.jpg" alt=""><figcaption></figcaption></figure>

## Contrast

Try to use colors that are high in contrast. It will make your text easier to read. Here is a great contrast checker:

{% embed url="<https://webaim.org/resources/contrastchecker/>" %}

* Example of a good score, 21:1 - **White** foreground on **Black** background:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/Lt2jPjBtOCSwAASwjFoc/Screenshot%202024-06-20%20at%202.35.57%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

* Poor score, 2.44:1 - **Blue** foreground on **Black** background:

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/3dGtHuiz3nnfyQuAkgw6/Screenshot%202024-06-20%20at%202.35.35%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://broadcast.presidiocreative.com/broadcast-v5/theme-settings/theme-settings/colors.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.