# Couleur principale du thème

La couleur principale du thème est la couleur primaire qui définit l'identité visuelle de votre marque dans tout le thème Plain Jane. Cette couleur apparaît dans des éléments clés comme les boutons, les liens, les accents et les composants interactifs.

## 🌈 Comprendre les couleurs du thème

### Ce que contrôle la couleur principale

Votre couleur principale influence :

* **Boutons primaires** (Ajouter au panier, Acheter maintenant, Envoyer)
* **Couleurs des liens** sur tout le site
* **États actifs du menu** et mises en évidence de la navigation
* **États de focus des formulaires** et mises en évidence des champs
* **Indicateurs de chargement** et barres de progression
* **Accents d'icônes** et éléments décoratifs
* **Effets au survol** sur les éléments interactifs

### Psychologie des couleurs en e‑commerce

Choisissez des couleurs qui correspondent à la personnalité de votre marque :

#### Confiance et fiabilité

* **Tons bleus** (#2563EB, #1E40AF) : Professionnel, digne de confiance
* **Tons verts** (#059669, #047857) : Croissance, stabilité, argent

#### Énergie et urgence

* **Tons rouges** (#DC2626, #B91C1C) : Excitation, urgence, puissance
* **Tons orange** (#EA580C, #C2410C) : Enthousiasme, chaleur, appel à l'action

#### Luxe et sophistication

* **Tons violets** (#7C3AED, #5B21B6) : Haut de gamme, créatif, luxueux
* **Noir/Anthracite** (#1F2937, #111827) : Élégant, sophistiqué, moderne

#### Naturel et biologique

* **Tons terre** (#A3A3A3, #78716C) : Naturel, durable, authentique
* **Verts doux** (#10B981, #059669) : Écologique, santé, nature

## 🛠️ Définir votre couleur principale

### Étape 1 : Accéder aux paramètres du thème

1. **Naviguer vers le personnalisateur de thème**
   * Aller à **Boutique en ligne → Thèmes**
   * Cliquer sur **Personnaliser** sur votre thème Plain Jane
2. **Trouver les paramètres du thème**
   * Faites défiler jusqu'à **Paramètres du thème** section
   * Recherchez **Couleurs** ou **Couleur principale du thème**

### Étape 2 : Choisissez votre couleur

#### Utilisation du sélecteur de couleur

* **Cliquez sur la case de couleur** pour ouvrir le sélecteur
* **Faites glisser le cercle** pour sélectionner la teinte
* **Ajustez la luminosité** avec le curseur vertical
* **Affinez avec des codes hexadécimaux** pour des couleurs précises

#### Saisie de couleur hexadécimale

Entrez les couleurs directement en utilisant des codes hex :

```
#FF6B6B  // Rouge corail
#4ECDC4  // Turquoise
#45B7D1  // Bleu ciel
#96CEB4  // Vert menthe
#FFEAA7  // Jaune chaud
#DDA0DD  // Violet prune
```

### Étape 3 : Prévisualisez les modifications

* **Utilisez le mode aperçu** pour voir les changements en temps réel
* **Testez sur différentes pages** (page d'accueil, produit, collection)
* **Vérifiez l'apparence sur mobile** pour la cohérence
* **Vérifiez la lisibilité** du texte sur les éléments colorés

## 🎯 Bonnes pratiques

### Considérations d'accessibilité

Assurez‑vous que vos choix de couleurs respectent les normes d'accessibilité :

#### Ratios de contraste

* **Texte normal** : Ratio de contraste minimum de 4,5:1
* **Texte de grande taille** (18pt+) : Ratio de contraste minimum de 3:1
* **Éléments interactifs** : Distinction visuelle claire

### Cohérence de la marque

* **Faites correspondre les couleurs de la marque existante** à partir de votre logo et de vos supports marketing
* **Envisagez des variations saisonnières** pour des campagnes spéciales
* **Maintenez la cohérence** sur tous les points de contact
* **Documentez vos choix de couleurs** pour référence par l'équipe

### Optimisation de la conversion

* **CTA à contraste élevé** : Faites ressortir clairement les boutons
* **Signaux de confiance** : Les bleus et verts fonctionnent souvent bien
* **Éléments d'urgence** : Rouges et oranges pour les offres sensibles au temps
* **Tests A/B** : Essayez différentes couleurs pour optimiser les conversions

## 📱 Considérations mobiles

### Couleurs des cibles tactiles

* **Assurez un contraste suffisant** pour les éléments tactiles
* **Testez sur des appareils réels** sous différents éclairages
* **Envisagez des zones tactiles plus grandes** avec des arrière-plans colorés
* **Vérifiez la visibilité** en plein soleil

### Impact sur les performances

* **Optimisation CSS** : Les thèmes modernes utilisent un rendu des couleurs efficace
* **Évitez les dégradés complexes** qui pourraient affecter les performances
* **Testez les temps de chargement** surtout sur les appareils plus lents

## 🐛 Dépannage

### Problèmes courants

#### Couleur non affichée

* **Videz le cache du navigateur** et rechargez la page
* **Vérifiez que les paramètres du thème** sont correctement enregistrés
* **Vérifiez le format de la couleur** (les codes hex doivent inclure #)

#### Contraste insuffisant

* **Utilisez des couleurs plus foncées** pour une meilleure lisibilité du texte
* **Testez avec des outils d'accessibilité** pour vérifier le contraste
* **Envisagez des boutons avec contour** au lieu de boutons remplis

#### Affichage incohérent

* **Vérifiez sur différentes pages** pour la cohérence
* **Testez sur divers appareils** et types d'écran
* **Vérifiez que le CSS n'est pas écrasé** par du code personnalisé

### Problèmes de performance

* **Simplifiez les schémas de couleurs** en cas de ralentissements
* **Évitez les transitions de couleur animées** sur les appareils bas de gamme
* **Utilisez les couleurs système** quand c'est possible pour de meilleures performances


---

# 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/plain-jane-docs-v2-fr/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.