# Colors
You can change the **Colors** of elements across your store, including general colors, header colors, footer colors, and product colors.
Theme colors apply to all sections and pages by default. You can apply specific colors to most sections and blocks in the theme editor. Colors selected for sections and blocks will override theme colors.
In the theme editor, click the **Theme settings** icon, then click to open the **Colors** tab.
{% hint style="info" %}
**Tip |** We recommend using WebAIM's [contrast checker](https://webaim.org/resources/contrastchecker/) when matching colors to make sure your text is clear and readable for everyone.
{% endhint %}
### General colors
| Setting | Description |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Accent | The accent color is used for buttons, badges, and elements that should stand out all over the store.
|
| Text | All headings, subheadings, and body text. The Header and Logo text are set separately.
|
| Background | The background on all pages including the home page. Appears in sections that have no background color set.
|
| Border | Border lines that can appear between sections and page elements.
|
| Input text | Change the color of text inside of inputs. Inputs can be quantity selectors or fields that the customer might fill in, like the contact form. It also changes placeholder text and labels above form fields.
|
| Icon | Change the color of icons. This applies to the feature product section, especially if you have social sharing icons enabled. It also changes the color of quantity selectors (+/-) on product pages.
|
### Header colors
| Setting | Description |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| Text | The color of all menu links, icons, borders, and additional text in the Header.
|
| Background | The background of the Header bar.
|
| Border | Border at the bottom of the store header.
|
### Footer colors
| Setting | Description |
| ----------------- | ----------------------------------------------------------------------------------------------- |
| Text | All menu links and text in the Footer.
|
| Background | The background of the Footer.
|
| Border | All border lines in the Footer.
|
| Button background | Button backgrounds in the Footer.
|
| Button text | Label text of buttons in the Footer.
|
### Contrast colors
**Contrast** colors are used for the **Style** option found in individual sections.
| Setting | Description |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Text | Change the text color in sections using contrast colors.
|
| Background | Change the background color in sections using contrast colors.
|
| Border | Change the color of borders in sections using contrast colors. Call to action buttons have a border.
|
| Input text | Change the color of input text in sections using contrast colors.
|
| Icon | Change the color of icons in contrast sections. This applies to the featured product section, especially if you have social sharing icons enabled.
|
### Popovers
Popovers are any parts of the page appear as popups or mini-windows. The popup, quick cart, and the search bar are all popovers.
| |
|---|
| Text | Change the text color in popovers.
 |
| Background | Change the background color in popovers.
 |
| Border | Change the border color in popovers.
 |
| Input text | Change the color of input text in popovers. If you use the quick cart feature, the labels above variant chooser dropdown menus use this text color.
 |
| Icon | Change the color of icons in popovers. This color is used for the quantity selectors (+/-) in the mini cart.
 |
***
> **Related links**
>
> [Theme settings](/lorenza/theme-styles/theme-settings.md)\
> [Preset styles](/lorenza/theme-styles/style-presets.md)\
> [Fonts](/lorenza/theme-styles/fonts.md)\
> [Animation](/lorenza/theme-styles/animation.md)
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://help.fluorescent.co/lorenza/theme-styles/colors.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.