# Theme-Farben

### Übersicht

Die Farben, die du hier hinterlegst spiegeln sich an unterschiedlichen Stellen deines Shops wider.

### Konfiguration

<figure><img src="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2F4CNV4nujW8otfBsKBBah%2Ftheme-farben.webp?alt=media&#x26;token=d54edbf9-9716-4625-8599-4ad81fdfcdca" alt=""><figcaption></figcaption></figure>

<details>

<summary>Primärfarbe</summary>

Dies ist die Hauptfarbe deines Shops. Sie zieht zieht sich wie ein roter Faden durch alle Unterseiten und färbt verschiedene Elemente in den hier hinterlegten Wert. Ganz konkret sind dies bspw. die [Buttons](https://docs.atloss.de/academy/fachbegriffe/button), die [Top Bar](https://docs.atloss.de/academy/fachbegriffe/top-bar) oder auch die [Ankündigungsleiste](https://docs.atloss.de/academy/fachbegriffe/ankundigungsleiste).

***

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

</details>

<details>

<summary>Sekundärfarbe</summary>

Die Sekundärfarbe dient als Akzentfarbe und tritt an vereinzelten Stellen in deinem Online Shop auf. Ein Beispiel hierfür ist der [Button](https://docs.atloss.de/academy/fachbegriffe/button) des Gutschein-Einlösefeldes im [Offcanvas](https://docs.atloss.de/academy/fachbegriffe/offcanvas)-Warenkorb.

***

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

</details>

<details>

<summary>Rahmen</summary>

Wie der Name schon verrät ist diese Farbkonfiguration für die Rahmen in deinem Online Shop verantwortlich. Diese kannst du bspw. an der Trennlinie auf der [Produkt Detailseite](https://docs.atloss.de/academy/fachbegriffe/produkt-detailseite) oder im [Warenkorb](https://docs.atloss.de/academy/fachbegriffe/warenkorb) sehen.

***

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

</details>

<details>

<summary>Hintergrund</summary>

Dies ist die Hintergrundfarbe deines Shops auf allen Seiten. Wir empfehlen diesen komplett weiß oder in einem leichten hellgrau zu halten. Andernfalls kann es schnell passieren, dass der Hintergrund zu stark ablenkt.

***

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

</details>

<details>

<summary>Browser-Farbe</summary>

Mit dieser Einstellung lässt sich die mobile Browser-Farbe anpassen. Jedoch unterstützt nicht jeder Browser dieses Feature. Daher kann unter Umständen in manchen Browsern immer noch eine Standard-Systemfarbe dargestellt werden.

<figure><img src="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2Fjc27NPOGQz6UCI6meXGZ%2Ftheme-farben-browser-farbe.webp?alt=media&#x26;token=66feceb2-b76b-4e81-bf69-cc3482262685" alt=""><figcaption></figcaption></figure>

</details>