# Theme

## 👨‍🎨️ What is a theme ?

A theme regroups all the global styling colors and fonts variables that will be used to generate the final style.

You can set following family colors.

* **General** forms related colors like background, header and form page background.
* **Primary** are the colors that will be displayed the most frequently across your survey components.
* **Secondary** colors accents actionable survey components like for example [radio buttons or checkboxes](https://docs.ngsurvey.com/form-management/form-designer/answers/answer-types/selection-answers).
* **Errors** are all the colors used by the survey error messages. You may force the preview survey to show all its error message by enabling the [preview errors option](https://docs.ngsurvey.com/form-management/style-branding/style-editor/style).

{% hint style="info" %}
You may also any of the global variable in your [CSS code](https://docs.ngsurvey.com/form-management/style-branding/style-editor/css) using the var keyword eg: color: **var(--ngs-text-color)**
{% endhint %}

## 🖍️ Picking a color

You may click on any color swatch to open the color picker to select the color of your choice.

![](https://1025048312-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)

To reset a color you may select the empty color swatch on the top right of the picker.

![](https://1025048312-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)

## 🔤 Switching fonts

To switch fonts you may either open the font selection pane to select a new font from the list of available fonts.    

![](https://1025048312-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" %}
The available fonts list uses Google Fonts if you are not able to see any fonts make sure that you have properly [link your ngSurvey installation with Google Fonts](https://docs.ngsurvey.com/installation-setup/system-settings/google/google-web-font). 
{% endhint %}

Or you may also change manually the fonts from the theme code variables list.

![](https://1025048312-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" %}
Fonts selected from the available fonts list will be automatically downloaded from the Google Fonts servers if the respondents does not have the selected font installed on his device.
{% endhint %}