# Haupt-Theme-Farbe

Die Hauptthemenfarbe ist die Primärfarbe, die die visuelle Identität Ihrer Marke im gesamten Plain Jane-Theme definiert. Diese Farbe erscheint in wichtigen Elementen wie Schaltflächen, Links, Akzenten und interaktiven Komponenten.

## 🌈 Verständnis der Theme-Farben

### Was die Hauptfarbe steuert

Ihre Hauptthemenfarbe beeinflusst:

* **Primäre Schaltflächen** (In den Warenkorb, Jetzt kaufen, Absenden)
* **Link-Farben** auf der gesamten Website
* **Aktive Menüzustände** und Navigationshervorhebungen
* **Formular-Fokuszustände** und Eingabehervorhebungen
* **Ladeindikatoren** und Fortschrittsanzeigen
* **Symbolakzente** und dekorative Elemente
* **Hover-Effekte** bei interaktiven Elementen

### Farbpsychologie im E‑Commerce

Wählen Sie Farben, die zur Persönlichkeit Ihrer Marke passen:

#### Vertrauen & Zuverlässigkeit

* **Blautöne** (#2563EB, #1E40AF): Professionell, vertrauenswürdig
* **Grüntöne** (#059669, #047857): Wachstum, Stabilität, Geld

#### Energie & Dringlichkeit

* **Rottöne** (#DC2626, #B91C1C): Aufregung, Dringlichkeit, Kraft
* **Orangetöne** (#EA580C, #C2410C): Begeisterung, Wärme, Handlungsaufruf

#### Luxus & Raffinesse

* **Violetttöne** (#7C3AED, #5B21B6): Premium, kreativ, luxuriös
* **Schwarz/Anthrazit** (#1F2937, #111827): Elegant, anspruchsvoll, modern

#### Natürlich & Organisch

* **Erdtöne** (#A3A3A3, #78716C): Natürlich, nachhaltig, authentisch
* **Sanfte Grüntöne** (#10B981, #059669): Umweltfreundlich, Gesundheit, Natur

## 🛠️ Ihre Hauptfarbe einstellen

### Schritt 1: Theme-Einstellungen aufrufen

1. **Zum Theme-Customizer navigieren**
   * Gehen Sie zu **Onlineshop → Themes**
   * Klicken Sie **Passen Sie** bei Ihrem Plain Jane-Theme
2. **Theme-Einstellungen finden**
   * Scrollen Sie nach unten zu **Theme-Einstellungen** Abschnitt
   * Suchen Sie nach **Farben** oder **Hauptthemenfarbe**

### Schritt 2: Wählen Sie Ihre Farbe

#### Verwendung des Farbwählers

* **Klicken Sie auf das Farbfeld** um den Wähler zu öffnen
* **Ziehen Sie den Kreis** um den Farbton auszuwählen
* **Helligkeit anpassen** mit dem vertikalen Schieberegler
* **Feinabstimmung mit Hex-Codes** für präzise Farben

#### Hex-Farbeneingabe

Geben Sie Farben direkt mit Hex-Codes ein:

```
#FF6B6B  // Korallenrot
#4ECDC4  // Türkis
#45B7D1  // Himmelblau
#96CEB4  // Minzgrün
#FFEAA7  // Warmes Gelb
#DDA0DD  // Pflaumenlila
```

### Schritt 3: Änderungen vorschauen

* **Vorschau-Modus verwenden** um Änderungen in Echtzeit zu sehen
* **Testen Sie auf verschiedenen Seiten** (Startseite, Produkt, Kollektion)
* **Mobile Darstellung prüfen** auf Konsistenz
* **Lesbarkeit überprüfen** von Text über farbigen Elementen

## 🎯 Beste Praktiken

### Barrierefreiheitsaspekte

Stellen Sie sicher, dass Ihre Farbauswahl die Zugänglichkeitsstandards erfüllt:

#### Kontrastverhältnisse

* **Normale Schrift**: Mindestens 4,5:1 Kontrastverhältnis
* **Große Schrift** (18pt+): Mindestens 3:1 Kontrastverhältnis
* **Interaktive Elemente**: Klare visuelle Unterscheidung

### Markenkonsistenz

* **Vorhandene Markenfarben anpassen** aus Ihrem Logo und Marketingmaterialien
* **Saisonale Variationen in Betracht ziehen** für spezielle Kampagnen
* **Konsistenz beibehalten** über alle Kontaktpunkte hinweg
* **Dokumentieren Sie Ihre Farbauswahl** zur Referenz für das Team

### Conversion-Optimierung

* **Hochkontrastige CTAs**: Lassen Sie Schaltflächen deutlich hervorstechen
* **Vertrauenssignale**: Blau- und Grüntöne funktionieren oft gut
* **Dringlichkeitselemente**: Rot- und Orangetöne für zeitkritische Angebote
* **A/B-Tests**: Probieren Sie verschiedene Farben, um Conversions zu optimieren

## 📱 Mobile Überlegungen

### Farben für Touch-Ziele

* **Sorgen Sie für ausreichenden Kontrast** für Touch-Elemente
* **Testen Sie auf echten Geräten** unter verschiedenen Lichtverhältnissen
* **Größere Touch-Flächen in Betracht ziehen** mit farbigen Hintergründen
* **Sichtbarkeit überprüfen** bei hellem Sonnenlicht

### Leistungsaspekte

* **CSS-Optimierung**: Moderne Themes verwenden effiziente Farbwiedergabe
* **Vermeiden Sie komplexe Verläufe** die die Leistung beeinträchtigen könnten
* **Ladezeiten testen** insbesondere auf langsameren Geräten

## 🐛 Fehlerbehebung

### Häufige Probleme

#### Farbe erscheint nicht

* **Browser-Cache leeren** und laden Sie die Seite neu
* **Überprüfen Sie, ob Theme-Einstellungen** richtig gespeichert sind
* **Überprüfen Sie das Farbformat** (Hex-Codes sollten # enthalten)

#### Schlechter Kontrast

* **Verwenden Sie dunklere Farben** für bessere Lesbarkeit von Text
* **Testen Sie mit Barrierefreiheitswerkzeugen** um den Kontrast zu überprüfen
* **Erwägen Sie umrissene Schaltflächen** anstatt ausgefüllter Schaltflächen

#### Inkonsistente Darstellung

* **Überprüfen Sie verschiedene Seiten** auf Konsistenz
* **Testen Sie auf unterschiedlichen Geräten** und Bildschirmtypen
* **Stellen Sie sicher, dass CSS nicht überschrieben wird** durch benutzerdefinierten Code

### Leistungsprobleme

* **Vereinfachen Sie Farbschemata** wenn Sie Leistungsprobleme haben
* **Vermeiden Sie animierte Farbübergänge** auf Geräten mit geringer Leistung
* **Verwenden Sie Systemfarben** wenn möglich für bessere Leistung


---

# 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://docs.openspaces.design/german/readme-1/theme-settings/main-theme-color.md?ask=<question>
```

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.