# Apparence et thèmes

Personnalisez votre formulaire avec des couleurs, des polices, des préréglages, des thèmes d’espace de travail partagés, des images de couverture et le mode sombre.

## Apparence et thèmes

Couleurs, polices, préréglages, images de couverture et mode sombre. Donnez à chaque formulaire un aspect naturellement aligné avec votre marque.

<h2 id="theme-panel">Panneau de thème</h2>
<p>
  Cliquez sur <strong>Thème</strong> (icône palette) dans la barre d’outils en haut. Le panneau s’ancre à droite et prévisualise les
  modifications instantanément.
</p>
<p>
  Le bouton <strong>Mode</strong> (Clair / Sombre) en haut du panneau change le schéma de couleurs que vous modifiez. Chaque mode conserve
  ses propres valeurs de thème, ce qui vous permet de les affiner indépendamment.
</p>
<p>
  Le sélecteur <strong>Thème</strong> en dessous liste d’abord vos thèmes d’espace de travail pour ce mode, puis les préréglages intégrés.
  Le pied de page affiche <strong>Toutes les modifications sont enregistrées</strong> tant que vous n’avez rien modifié ; puis{' '}
  <strong>Abandonner</strong> et <strong>Enregistrer</strong> apparaissent.
</p>

<h2 id="presets">Préréglages</h2>
<p>
  Le sélecteur de thème propose sept préréglages pour le mode clair et neuf pour le mode sombre. Chacun applique un ensemble coordonné de
  couleurs, une police et un arrondi des angles en un seul clic.
</p>
<ul>
  <li>
    <strong>formbase par défaut</strong> — appliqué automatiquement à chaque nouveau formulaire, un par mode
  </li>
  <li>
    <strong>Préréglages</strong> — les thèmes sélectionnés ci-dessous
  </li>
  <li>
    <strong>Personnalisé</strong> — « Ce formulaire uniquement ». Ce que montre le sélecteur dès que vous modifiez une valeur à la main
  </li>
</ul>

> ℹ️ **Disponible sur Gratuit**
> <p>
>     Les thèmes personnalisés, y compris les préréglages et la personnalisation distincte des styles clair et sombre, sont disponibles sur
>     tous les plans. Voir <a href="/fr/subscription-billing/plans-pricing">les plans et tarifs</a>.
>   </p>

<h3 id="light-presets">Préréglages du mode clair</h3>

<h3 id="dark-presets">Préréglages du mode sombre</h3>

<h2 id="workspace-themes">Thèmes d’espace de travail</h2>
<p>
  Un thème d’espace de travail est un thème nommé pour un mode, clair ou sombre, que plusieurs formulaires partagent. Utilisez-en un pour
  garder chaque formulaire aligné avec votre marque : changez le thème une fois, et tous les formulaires qui l’utilisent suivent. Pour
  personnaliser les deux modes, conservez-en deux, par exemple <em>Acme Light</em> et <em>Acme Dark</em>.
</p>

<h3 id="create-workspace-theme">Créer un thème d’espace de travail</h3>
<ol>
  <li>
    Ouvrez le panneau de thème sur un formulaire, choisissez Clair ou Sombre, puis choisissez un préréglage ou ajustez les couleurs jusqu’à
    ce que le formulaire vous convienne.
  </li>
  <li>
    Cliquez sur <strong>Enregistrer comme thème de l’espace de travail</strong> sous le sélecteur de thème et donnez-lui un nom, par exemple
    le nom de votre entreprise.
  </li>
</ol>
<p>Ce mode du formulaire est maintenant lié au nouveau thème. Le sélecteur affiche son nom et le nombre de formulaires qui l’utilisent.</p>

<h3 id="use-workspace-theme">L’utiliser sur un autre formulaire</h3>
<p>
  Ouvrez le panneau de thème sur l’autre formulaire, choisissez le thème sous <strong>Thèmes de l’espace de travail</strong>, puis cliquez
  sur <strong>Enregistrer</strong>. Le sélecteur ne liste que les thèmes d’espace de travail pour le mode que vous modifiez ; reliez donc
  les modes clair et sombre séparément.
</p>

<h3 id="edit-workspace-theme">Modifier un formulaire lié</h3>
<p>
  Un formulaire lié se modifie comme n’importe quel autre formulaire. Dès que vos modifications diffèrent du thème de l’espace de travail,
  le pied de page vous demande où les enregistrer :
</p>
<ul>
  <li>
    <strong>Enregistrer dans [nom du thème]</strong> met à jour le thème de l’espace de travail et tous les formulaires qui lui sont liés.
  </li>
  <li>
    <strong>Enregistrer pour ce formulaire uniquement</strong> conserve la modification sur ce formulaire. Ce mode cesse de suivre le thème
    de l’espace de travail et devient un thème personnalisé.
  </li>
</ul>
<p>
  Appliquer un préréglage à un mode lié le délie également. Pour le relier, choisissez le thème de l’espace de travail dans le sélecteur,
  puis enregistrez.
</p>

> ℹ️ **Les formulaires publiés se mettent à jour à leur prochaine publication**
> <p>
>     Enregistrer un thème d’espace de travail modifie immédiatement le brouillon de chaque formulaire lié. Les répondants voient le nouvel
>     aspect après chaque nouvelle publication du formulaire, comme pour toute autre modification. Les formulaires liés affichent{' '}
>     <strong>Publier les modifications</strong> jusque-là.
>   </p>

<h3 id="manage-workspace-themes">Renommer ou supprimer</h3>
<p>
  Sur un formulaire lié, ouvrez le menu <strong>⋯</strong> à côté du sélecteur de thème. <strong>Renommer</strong> change le nom partout où
  le thème est utilisé. <strong>Supprimer</strong> retire le thème ; les formulaires qui l’utilisaient conservent leur aspect actuel sous
  forme de thème personnalisé.
</p>

<h2 id="theme-sections">Contrôles du thème</h2>

<p>
  Choisissez un préréglage ou un thème d’espace de travail, puis affinez la typographie et les couleurs. Chaque couleur décrit un rôle
  plutôt qu’un composant unique. Par exemple, modifier <strong>Texte</strong> met à jour ensemble le texte de la page, les titres des
  questions, le texte des champs et le texte des options. Survolez le nom d’une couleur pour voir ce qu’elle contrôle. Un point signale les
  couleurs que vous avez modifiées mais pas encore enregistrées.
</p>

<h3 id="typography">Typographie</h3>

<h3 id="colors">Couleurs</h3>

<p>Les couleurs sont regroupées selon leur emplacement dans le formulaire.</p>

<p>
  Le groupe Évaluation comprend aussi <strong>Taille des étoiles</strong>, la taille des étoiles de notation en pixels, de 12 à 48.
</p>

<h2 id="fonts">Polices</h2>
<p>formbase propose onze familles de polices. La police choisie dans la section Typographie s’applique à tout le texte du formulaire.</p>

<h2 id="cover-logo">Image de couverture et logo</h2>
<p>
  L’image de couverture et le logo se trouvent en haut du canevas. Vous les configurez directement sur le canevas, pas dans le panneau de
  thème. Pour un guide pas à pas, voir{' '}
  <a href="/fr/building-forms/understanding-the-editor#cover-logo">Comprendre l’éditeur → Couverture et logo</a>.
</p>

<h2 id="dark-mode">Mode sombre</h2>
<p>formbase prend en charge le mode sombre à deux endroits : le tableau de bord et les formulaires publiés.</p>

<h3 id="dark-mode-dashboard">Tableau de bord</h3>
<p>
  Activez le mode sombre depuis le menu utilisateur en bas de la barre latérale. Le paramètre se synchronise sur votre compte entre les
  appareils.
</p>

<h3 id="dark-mode-published">Formulaires publiés</h3>
<p>
  Les formulaires publiés suivent par défaut les préférences système du répondant. Si son appareil est en mode sombre, le formulaire
  s’affiche en mode sombre.
</p>

<h3 id="dark-mode-theming">Personnaliser les deux modes</h3>
<p>
  Si vous configurez uniquement un thème clair, le formulaire utilise les couleurs sombres par défaut de formbase lorsque le mode sombre est
  actif. Pour un contrôle total, configurez les deux schémas de couleurs à l’aide du bouton clair/sombre en haut du panneau de thème.
</p>
<p>
  Lorsque vous basculez entre Clair et Sombre dans le panneau de thème, le tableau de bord s’ajuste en conséquence. Cela vous permet de
  prévisualiser votre thème en contexte pendant l’édition.
</p>

<h2 id="examples">Modèles de personnalisation courants</h2>

<ul>
  <li>
    <strong>Correspondre à votre marque</strong> — choisissez la police de votre marque, définissez la couleur du bouton sur votre couleur
    principale et téléchargez votre logo. Utilisez un préréglage comme point de départ, puis enregistrez le résultat comme thème d’espace de
    travail pour que tous vos formulaires le partagent.
  </li>
  <li>
    <strong>Sondage prioritairement en mode sombre</strong> — forcez le mode sombre via les paramètres d’intégration lors du partage, puis
    personnalisez le schéma de couleurs sombre pour une meilleure lisibilité. Utilisez un accent à fort contraste pour la couleur de
    notation active afin que les étoiles ressortent sur les fonds sombres.
  </li>
  <li>
    <strong>Intégration minimaliste</strong> — réglez la couleur Arrière-plan pour qu’elle corresponde à votre site, masquez l’image de
    couverture et le logo dans les paramètres d’intégration, utilisez une couleur Bordure discrète, et réduisez le rayon d’angle à 0.
  </li>
  <li>
    <strong>Quiz ludique</strong> — choisissez Comic Sans MS, poussez le rayon d’angle vers 32 pour des formes en pilule, utilisez une
    couleur Sélectionné vive, et ajoutez une image de couverture depuis l’onglet Unsplash du sélecteur de couverture.
  </li>
</ul>

<h2 id="branding">Image de marque</h2>
<p>
  Par défaut, les formulaires publiés affichent un petit badge formbase. Désactivez-le avec <strong>Afficher la marque formbase</strong>{' '}
  dans <strong>Paramètres du formulaire → Général</strong>. Supprimer le badge nécessite un plan Pro ou Business — voir{' '}
  <a href="/fr/subscription-billing/plans-pricing">les plans et tarifs</a>.
</p>

> 💡 **Testez les deux modes avant de publier**
> <p>
>     Prévisualisez votre formulaire avec le mode sombre système activé avant de le publier. Le contraste du logo et les couleurs d’accent
>     nécessitent souvent un ajustement pour la version sombre, en particulier les images de couverture et les couleurs de boutons qui sont
>     belles sur fond clair mais qui se fondent sur fond sombre.
>   </p>

<h2 id="next-steps">Étapes suivantes</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Réglage de la langue](/fr/building-forms/language-setting) — Proposez votre formulaire dans n’importe quelle langue
  - [Téléchargements de fichiers et signatures](/fr/building-forms/file-uploads-signatures) — Acceptez des documents et des signatures électroniques
  - [Protection contre les robots](/fr/building-forms/captcha-bot-protection) — Bloquez le spam avec Cloudflare Turnstile
  - [Liens de partage](/fr/sharing-publishing/sharing-embedding) — Créez et gérez les URLs de partage
</div>
