{"id":739,"date":"2026-05-17T05:54:02","date_gmt":"2026-05-17T04:54:02","guid":{"rendered":"https:\/\/yaxii.dev\/?yaxii_doc=changing-colors-styles"},"modified":"2026-05-19T16:36:11","modified_gmt":"2026-05-19T15:36:11","slug":"changing-colors-styles","status":"publish","type":"yaxii_doc","link":"https:\/\/yaxii.dev\/fr\/docs\/yaxii-smart-form\/changing-colors-styles\/","title":{"rendered":"Modifier les couleurs et styles"},"content":{"rendered":"

Le probl\u00e8me que ce guide r\u00e9sout<\/h2>\n

Un formulaire dont les couleurs ne correspondent pas \u00e0 l’identit\u00e9 visuelle de votre boutique nuit \u00e0 la confiance de vos clients. Ce guide vous montre exactement quels param\u00e8tres contr\u00f4lent chaque aspect visuel \u2014 et comment les modifier en quelques clics pour obtenir un formulaire qui ressemble \u00e0 votre marque.<\/p>\n

O\u00f9 trouver les param\u00e8tres d’apparence<\/h2>\n

Dans le menu WordPress, allez dans Yaxii Smart Form > Param\u00e8tres du formulaire<\/b>, puis cliquez sur l’onglet Apparence<\/b>.<\/p>\n

[Screenshot: Page des param\u00e8tres du formulaire avec l’onglet \u00ab\u00a0Apparence\u00a0\u00bb s\u00e9lectionn\u00e9, montrant les sections Th\u00e8me, Couleurs et Mode sombre]<\/p>\n

Choisir un th\u00e8me de formulaire<\/h2>\n

Yaxii Smart Form propose plusieurs th\u00e8mes pr\u00e9d\u00e9finis qui modifient le style g\u00e9n\u00e9ral du formulaire en une seule action.<\/p>\n

  1. 1<\/span>
    Ouvrir le s\u00e9lecteur de th\u00e8me<\/div>
    Dans l’onglet Apparence<\/b>, rep\u00e9rez la section Th\u00e8me du formulaire<\/b>. Cliquez sur le menu d\u00e9roulant Mod\u00e8le de formulaire<\/b> pour afficher les th\u00e8mes disponibles.<\/p>\n

    [Screenshot: Menu d\u00e9roulant \u00ab\u00a0Mod\u00e8le de formulaire\u00a0\u00bb ouvert avec plusieurs noms de th\u00e8mes list\u00e9s]<\/div><\/li>

  2. 2<\/span>
    S\u00e9lectionner et pr\u00e9visualiser<\/div>
    Cliquez sur un th\u00e8me. L’aper\u00e7u du formulaire se met \u00e0 jour imm\u00e9diatement \u00e0 droite pour vous montrer l’effet visuel exact.<\/div><\/li>
  3. 3<\/span>
    Enregistrer<\/div>
    Une fois satisfait, cliquez sur Enregistrer les modifications<\/b> en bas de la page.<\/div><\/li><\/ol><\/div>\n

    Personnaliser les couleurs individuellement<\/h2>\n

    Si aucun th\u00e8me ne correspond exactement \u00e0 votre charte graphique, affinez trois couleurs s\u00e9par\u00e9ment :<\/p>\n

    Param\u00e8tre<\/th>Ce qu’il contr\u00f4le visuellement<\/th><\/tr><\/thead>
    Couleur principale<\/b><\/td>Bouton de commande, accents actifs et \u00e9l\u00e9ments de s\u00e9lection<\/td><\/tr>
    Couleur de fond<\/b><\/td>Fond g\u00e9n\u00e9ral du bloc formulaire<\/td><\/tr>
    Couleur du texte<\/b><\/td>\u00c9tiquettes des champs et valeurs saisies par le client<\/td><\/tr><\/tbody><\/table><\/div><\/div>\n

    Pour modifier une couleur, cliquez sur le carr\u00e9 de couleur en regard du param\u00e8tre, puis choisissez une teinte dans le s\u00e9lecteur ou saisissez directement un code hexad\u00e9cimal (ex. : #E63946<\/code>).<\/p>\n

    [Screenshot: Les trois s\u00e9lecteurs de couleur align\u00e9s \u2014 Couleur principale, Couleur de fond, Couleur du texte \u2014 avec le s\u00e9lecteur de teinte ouvert sur la couleur principale]<\/p>\n

    Activer le mode sombre<\/h2>\n

    Si votre boutique utilise un th\u00e8me sombre ou si votre client\u00e8le pr\u00e9f\u00e8re ce mode d’affichage, activez l’option correspondante dans l’onglet Apparence<\/b> :<\/p>\n