# Theme colors

### Colors

In the colors tab you can find the global color settings of the theme. The **primary color (1)** and **secondary color (2)** are the main colors of the store.

{% hint style="info" %}
The **Primary and Secondary colors** should never be `transparent` and usually not `#ffffff` (white), as these colors are also used as foreground colors.

Therefore, always make sure that these colors have sufficient contrast to the color of the **Body background (4)** and **Shop background (5)**.

**Exception:** You want to create a dark layout with a dark Body background and Shop background color. Then it may be necessary to use light primary and secondary colors.
{% endhint %}

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FtpmU8NyGGeHKdpxvF654%2Fdocs-en-config-theme-typo-colors-theme-colors.png?alt=media\&token=868dc042-6ee8-486d-b7ab-e95e5fa60c8b)

The value for **Meta Theme-color (6)** specifies a color that browsers should use to match the display of the page or surrounding UI. Especially seen on mobile devices..

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color>" %}

#### Body background vs Shop background

The global background colors of the store are divided into body background and store background. The **Body background (4)** is thereby the background of the entire HTML document (Body). The **shop background (5)** is the background of the store, which in turn is the HTML document.

{% hint style="info" %}
Note: The arrow from the primary color to the body background field shows that colors can be further used in other fields based on their variables.
{% endhint %}

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FP1uRCvJ5WRDCVhGfikUb%2Fdocs-en-config-theme-typo-colors-theme-colors-example.png?alt=media\&token=af78bb6d-3bb5-444b-934a-40ac1024fbd5)

### Basic configuration

There are certain areas in the theme whose foreground color is determined based on the background color. This is the case with the primary buttons, for example. The contrast ratio determines when the brightness of the color changes from "dark" to "light".

Example:&#x20;

<div><figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2Fu84y4urEpX16L0KLeCOK%2Fdocs-de-storefront-update-6_5-contrast-ratio.png?alt=media&#x26;token=68fe32f1-283c-4e00-98ed-64d9347214f9" alt=""><figcaption><p>Threshold 4.5</p></figcaption></figure> <figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2F8ZqqhbEPUlNXC79BUXki%2Fdocs-de-storefront-update-6_5-contrast-ratio-2.png?alt=media&#x26;token=ebc03f6a-ecd5-459b-a9f2-d1f5ba681edc" alt=""><figcaption><p>Threshold 2</p></figcaption></figure></div>

In Shopware 6.5, the calculation basis has been adapted to the Web Content Accessibility Guidelines (WCAG).

The **contrast threshold (1)** is therefor used to calculate contrast colors. For example, if the background color of a button is old pink `#d9ab98` and there is set at a threshold of `4.5` the foreground color as a contrast color will be calculated as a **dark** color. At a threshold value of `2` the foreground color of the button will be calculated as a **light** color.

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FjJF9lIS86xyaA3tUfWKK%2Fdocs-en-config-theme-typo-colors-theme-colors-basic-configuration.png?alt=media&#x26;token=80b8910c-42e4-420a-b8d9-79fd8ea83f3f" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The contrast threshold setting may affect the readability of certain elements. By default, a contrast threshold of 4.5 provides optimal readability.
{% endhint %}