# Theme colors

### Overview

The colors you set here will be reflected in various places in your shop.

### Configuration

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/ScO47LJQ1EEr9iCm7k94/theme-farben.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Primary Color</summary>

This is the main color of your shop. It runs like a common thread through all subpages and colors various elements in the value stored here. Specifically, these are, for example, the [buttons](https://docs.atloss.de/en/academy/technical-terms/button), the [top bar](https://docs.atloss.de/en/academy/technical-terms/top-bar), or the [announcement bar](https://docs.atloss.de/en/theme-configuration/header/announcement-bar).

***

[Variable:](https://docs.atloss.de/en/academy/technical-terms/variable) `$sw-color-brand-primary`

</details>

<details>

<summary>Secondary Color</summary>

The secondary color serves as an accent color and appears in isolated places in your online shop. An example of this is the [button](https://docs.atloss.de/en/academy/technical-terms/button) for the voucher redemption field in the [off-canvas ](https://docs.atloss.de/en/academy/technical-terms/offcanvas)shopping cart.

***

[Variable:](https://docs.atloss.de/en/academy/technical-terms/variable) `$sw-color-brand-secondary`

</details>

<details>

<summary>Frames</summary>

As the name suggests, this color configuration is responsible for the frames in your online shop. You can see these, for example, at the dividing line on the [product detail page](https://docs.atloss.de/en/academy/technical-terms/product-detail-page) or in the [shopping cart](https://docs.atloss.de/en/academy/technical-terms/shopping-cart).

***

[Variable:](https://docs.atloss.de/en/academy/technical-terms/variable) `$sw-border-color`

</details>

<details>

<summary>Background</summary>

This is the background color of your shop on all pages. We recommend keeping it completely white or in a light gray. Otherwise, the background can quickly become too distracting.

***

[Variable:](https://docs.atloss.de/en/academy/technical-terms/variable) `$sw-background-color`

</details>

<details>

<summary>Browser Color</summary>

This setting allows you to customize the mobile browser color. However, not all browsers support this feature. Therefore, some browsers may still display a default system color.

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/mshB9OM75y5FNqZNyLmY/theme-farben-browser-farbe.webp" alt=""><figcaption></figcaption></figure>

</details>
