# Thème

## 👨‍🎨️ Qu'est-ce qu'un thème ?

Un thème regroupe toutes les variables globales de style (couleurs et polices) qui seront utilisées pour générer le style final.

Vous pouvez définir les familles de couleurs suivantes.

* **Général** couleurs liées aux formulaires comme l'arrière-plan, l'en-tête et l'arrière-plan des pages de formulaire.
* **Primaire** sont les couleurs qui seront affichées le plus fréquemment dans vos composants de Sondage.
* **Secondaire** accentuent les composants actionnables du Sondage comme par exemple [boutons radio ou cases à cocher](https://docs.ngsurvey.com/fr/form-management/form-designer/answers/answer-types/selection-answers).
* **Erreurs** sont toutes les couleurs utilisées par les messages d'erreur du Sondage. Vous pouvez forcer l'aperçu du Sondage à afficher tous ses messages d'erreur en activant l'option [aperçu des erreurs](https://docs.ngsurvey.com/fr/form-management/style-branding/style-editor/style).

{% hint style="info" %}
Vous pouvez également utiliser n'importe quelle variable globale dans votre [code CSS](https://docs.ngsurvey.com/fr/form-management/style-branding/style-editor/css) en utilisant le mot-clé var par ex. : color : **var(--ngs-text-color)**
{% endhint %}

## 🖍️ Choisir une couleur

Vous pouvez cliquer sur n'importe quel échantillon de couleur pour ouvrir le sélecteur et choisir la couleur souhaitée.

![](https://186103257-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8fLhS0bmfBRyq0HdUm%2F-MBcTA3lSLW-dmc4wgTi%2F-MBcU7f0wEVsBFabJVQh%2Fimage.png?alt=media\&token=ac087b5a-b2dc-45d1-a6ec-f9d3971c0321)

Pour réinitialiser une couleur, sélectionnez l'échantillon vide en haut à droite du sélecteur.

![](https://186103257-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8fLhS0bmfBRyq0HdUm%2F-MBcUd1EWWc0udkh4ddT%2F-MBcbruhQsYgNT7xEEZH%2Fimage.png?alt=media\&token=254d1be3-a909-41cf-9b3e-86cc0429ed14)

## 🔤 Changer les polices

Pour changer les polices, vous pouvez soit ouvrir le panneau de sélection de polices pour en choisir une nouvelle dans la liste des polices disponibles.    

![](https://186103257-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8fLhS0bmfBRyq0HdUm%2F-MBcNP-SAiNMWHIuG_Qc%2F-MBcOkHmiZT132UYgnp_%2Fimage.png?alt=media\&token=29f4ddbc-2f26-470e-948c-b7bc93ac211a)

{% hint style="warning" %}
La liste des polices disponibles utilise Google Fonts ; si vous ne voyez aucune police, assurez-vous d'avoir correctement [lier votre installation ngSurvey à Google Fonts](https://docs.ngsurvey.com/fr/installation-setup/system-settings/google/google-web-font). 
{% endhint %}

Ou vous pouvez également modifier manuellement les polices depuis la liste des variables de code du thème.

![](https://186103257-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8fLhS0bmfBRyq0HdUm%2F-MBcNP-SAiNMWHIuG_Qc%2F-MBcP84eRa62d_SYw8vH%2Fimage.png?alt=media\&token=e57d4269-971e-4670-adff-0b5c21eb3456)

{% hint style="info" %}
Les polices sélectionnées depuis la liste des polices disponibles seront automatiquement téléchargées depuis les serveurs Google Fonts si le Répondant n'a pas la police sélectionnée installée sur son appareil.
{% endhint %}