> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/readme/stiletto-6.0-visual-refresh/colors.md).

# Colors

{% hint style="warning" %}
We're working closely with Shopify to resolve an ongoing issue with Shopify's auto-updating system, when updating from a version older than v6.

<img src="/files/BifBuPsLrIzantIzhLxm" alt="Error: No color schemes defined." data-size="original">

The current workaround is to try updating your original theme copy again. If this still doesn't work, [please reach out to our support](https://fluorescent.co/contact#contact) along with your [Collaborator Request Code](https://help.fluorescent.co/stiletto/support/store-access-requests#sharing-collaborator-request-code).

Please note that when the theme is successfully updated, you will still need to [set up the new color schemes](#updating-your-theme-with-color-schemes) to match your original theme copy. Shopify's auto-updating system does not transfer older colors to the newer color schemes.
{% endhint %}

## <mark style="color:$primary;">Color schemes</mark>

<mark style="color:$info;">Stiletto now uses Shopify's color schemes. Apply color schemes to sections and components like popups and modals, drawers. Find the Color scheme option added under</mark> <mark style="color:$info;">**Section style**</mark> <mark style="color:$info;">in section settings</mark>

**Note** Before publishing, you may need to [update and apply color schemes](#updating-your-theme-with-color-schemes) to pre-existing sections.

***

{% columns fullWidth="false" %}
{% column width="50%" %} <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **Sections**\ <mark style="color:$info;">Apply a custom color scheme to any section.</mark>

<sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **Popups and modals**\ <mark style="color:$info;">Apply color schemes to popups and quick view modals.</mark>

<sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **Drawers**\ <mark style="color:$info;">Apply color schemes to quick cart and menu drawers.</mark>

<sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **PDP 'Add to cart' button**\ <mark style="color:$info;">Use Solid or Outline buttons colors from section color scheme</mark>

<sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **PDP Sticky add to cart**\ <mark style="color:$info;">Apply a color scheme for the sticky bar.</mark>
{% endcolumn %}

{% column width="50%" %}

<div align="left" data-with-frame="true"><figure><img src="/files/l77bTgi9NKAUk536YjEH" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

***

{% columns %}
{% column %}
{% hint style="info" %}
In section settings, most overlay and custom color options have been replaced by color schemes.
{% endhint %}
{% endcolumn %}

{% column %}
{% hint style="info" %}
You can change the **default color scheme** for all sections and pages in *Theme settings > Colors*.
{% endhint %}
{% endcolumn %}
{% endcolumns %}

## <mark style="color:$primary;">More color options...</mark>

<mark style="color:$info;">Stiletto now offers more granular control over colors. In color schemes, we've added color options that can be applied to more elements of your sections. We've also added more color options for product badges and notifications.</mark>

***

{% columns fullWidth="false" %}
{% column width="50%" %} <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **Background gradient**\ <mark style="color:$info;">Use gradients instead of solid colors for section backgrounds and overlays.</mark>

<sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **Form inputs**\ <mark style="color:$info;">Select Text and Background colors for fields.</mark>

<sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **Solid buttons**\ <mark style="color:$info;">Select text, background, and hover colors for all solid style buttons.</mark>

<sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **Outline buttons**\ <mark style="color:$info;">Select text and outline colors for all outline style buttons.</mark>

<sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **Product badges**\ <mark style="color:$info;">Custom color options for Sale and Sold-out badges.</mark>

<sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **Notifications**\ <mark style="color:$info;">Select Success and Error colors</mark>
{% endcolumn %}

{% column width="50%" %}

<div align="left" data-with-frame="true"><figure><img src="/files/A9mj45gMl7GamjUM2Nec" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

***

{% columns fullWidth="false" %}
{% column %}
{% hint style="info" %}
**General** and **Button** color options have moved into color schemes.
{% endhint %}
{% endcolumn %}

{% column %}
{% hint style="info" %}
**Header** and **Footer** colors now use color schemes in their section settings.
{% endhint %}
{% endcolumn %}
{% endcolumns %}

<h3 align="center">Updating your theme with color schemes</h3>

***

With color schemes replacing some of custom section color options, you'll want to set up color schemes that match any pre-existing sections, then apply them in section settings.

We recommend starting by editing and assigning the **default color scheme** in T*heme settings > Colors*. This will apply the base colors used across your entire site, which can then be replaced by other color schemes at the section level.

* **Add or update color scheme**
* **Assign color schemes in section settings**

<details>

<summary>Replace custom color options with color schemes</summary>

* Collection list grid
* Collection list slider
* Events (badges)
* Image with text
* Image with text split
* Multi-column
* Video with text

</details>

<details>

<summary>Replace custom overlay colors with color schemes</summary>

* Collection banner
* Countdown banner
* Countdown bar
* Gallery carousel
* Grid blocks
* Image compare
* Image hero
* Image hero split
* Newsletter compact
* Newsletter signup
* Promotion banner
* Promotion bar
* Slideshow
* Video
* Video hero

</details>

#### <mark style="color:$info;">Advanced: Changes to CSS selectors for colors</mark>

If you've made code customizations to Stiletto's global colors, note that there's been some changes to CSS variable names.

<details>

<summary>Meta color variable name replacements</summary>

<table><thead><tr><th valign="top">Variable</th><th valign="top">Replacement</th></tr></thead><tbody><tr><td valign="top">--color-text</td><td valign="top"><mark style="color:$info;">no replacement</mark></td></tr><tr><td valign="top">--color-text-8-percent</td><td valign="top">--color-text-alpha-10</td></tr><tr><td valign="top">--color-text-alpha</td><td valign="top">--color-text-alpha-40</td></tr><tr><td valign="top">--color-text-meta</td><td valign="top">--color-text-alpha-60</td></tr><tr><td valign="top">--color-text-link</td><td valign="top">--color-text-link</td></tr><tr><td valign="top">--color-text-error</td><td valign="top"><mark style="color:$info;">no replacement</mark></td></tr><tr><td valign="top">--color-text-success</td><td valign="top"><mark style="color:$info;">no replacement</mark></td></tr><tr><td valign="top">--color-background</td><td valign="top">--color-background</td></tr><tr><td valign="top">--color-background-semi-transparent-80</td><td valign="top">--color-background-alpha-80</td></tr><tr><td valign="top">--color-background-semi-transparent-90</td><td valign="top">--color-background-alpha-90</td></tr><tr><td valign="top">--color-background-transparent</td><td valign="top">--color-background-alpha-0</td></tr><tr><td valign="top">--color-border</td><td valign="top"><mark style="color:$info;">no replacement</mark></td></tr><tr><td valign="top">--color-border-meta</td><td valign="top">--color-border-alpha-60</td></tr><tr><td valign="top">--color-overlay</td><td valign="top"><mark style="color:$info;">no replacement</mark></td></tr><tr><td valign="top">--color-background-meta</td><td valign="top">--color-text-alpha-05</td></tr><tr><td valign="top">--color-background-meta-alpha</td><td valign="top">--color-text-alpha-05</td></tr><tr><td valign="top">--color-background-darker-meta</td><td valign="top">--color-text-alpha-08 (or 10)</td></tr><tr><td valign="top">--color-background-darker-meta-alpha</td><td valign="top">--color-text-alpha-08</td></tr><tr><td valign="top">--color-background-placeholder</td><td valign="top"><mark style="color:$info;">no replacement</mark></td></tr><tr><td valign="top">--color-background-placeholder-lighter</td><td valign="top"><mark style="color:$info;">no replacement</mark></td></tr><tr><td valign="top">--color-foreground-placeholder</td><td valign="top"><mark style="color:$info;">no replacement</mark></td></tr><tr><td valign="top">--color-border-input</td><td valign="top">--color-text-input-alpha-40</td></tr><tr><td valign="top">--color-border-input-alpha</td><td valign="top">--color-text-input-alpha-10</td></tr><tr><td valign="top">--color-text-input</td><td valign="top"><mark style="color:$info;">no replacement</mark></td></tr><tr><td valign="top">--color-text-input-alpha</td><td valign="top">--color-text-input-alpha-05</td></tr><tr><td valign="top">--color-text-button</td><td valign="top">--color-text-button-solid</td></tr><tr><td valign="top">--color-background-button</td><td valign="top">--color-button-solid</td></tr><tr><td valign="top">--color-background-button-alpha</td><td valign="top">--color-text-button-outline-alpha-60</td></tr><tr><td valign="top">--color-background-outline-button-alpha</td><td valign="top">--color-text-button-outline-alpha-10</td></tr><tr><td valign="top">--color-background-button-hover</td><td valign="top">--color-button-solid-hover</td></tr><tr><td valign="top">--color-icon</td><td valign="top">--color-text-alpha-40</td></tr><tr><td valign="top">--color-icon-darker</td><td valign="top">--color-text-alpha-60</td></tr><tr><td valign="top">--color-text-sale-badge</td><td valign="top"><mark style="color:$info;">no replacement</mark></td></tr><tr><td valign="top">--color-background-sold-badge</td><td valign="top"><mark style="color:$info;">no replacement</mark></td></tr><tr><td valign="top">--color-text-sold-badge</td><td valign="top"><mark style="color:$info;">no replacement</mark></td></tr><tr><td valign="top">--color-text-header</td><td valign="top">--color-text</td></tr><tr><td valign="top">--color-text-header-half-transparent</td><td valign="top">--color-text-alpha-50</td></tr><tr><td valign="top">--color-background-header</td><td valign="top">--color-background</td></tr><tr><td valign="top">--color-background-header-transparent</td><td valign="top">--color-background-alpha-0</td></tr><tr><td valign="top">--color-icon-header</td><td valign="top">--color-text</td></tr><tr><td valign="top">--color-shadow-header</td><td valign="top"><mark style="color:$info;">no replacement</mark></td></tr><tr><td valign="top">--color-background-footer</td><td valign="top">--color-background</td></tr><tr><td valign="top">--color-text-footer</td><td valign="top">--color-text</td></tr><tr><td valign="top">--color-text-footer-subdued</td><td valign="top">--color-text-alpha-70</td></tr><tr><td valign="top">--color-products-sale-price</td><td valign="top"><mark style="color:$info;">no replacement</mark></td></tr><tr><td valign="top">--color-products-rating-star</td><td valign="top"><mark style="color:$info;">no replacement</mark></td></tr><tr><td valign="top">--color-products-stock-good</td><td valign="top"><mark style="color:$info;">no replacement</mark></td></tr><tr><td valign="top">--color-products-stock-medium</td><td valign="top"><mark style="color:$info;">no replacement</mark></td></tr><tr><td valign="top">--color-products-stock-bad</td><td valign="top"><mark style="color:$info;">no replacement</mark></td></tr></tbody></table>

</details>