# Designvorlage

## 👨‍🎨️ Was ist ein Theme?

Ein Theme fasst alle globalen Stilfarben und Schriftvariablen zusammen, die zur Erzeugung des endgültigen Stils verwendet werden.

Sie können die folgenden Farbgruppen festlegen.

* **Allgemein** formularbezogene Farben wie Hintergrund, Header und Formularseitenhintergrund.
* **Primary** sind die Farben, die am häufigsten in Ihren Umfragekomponenten angezeigt werden.
* **Secondary** Farbakzente für interaktive Umfragekomponenten wie zum Beispiel [radio buttons or checkboxes](https://docs.ngsurvey.com/de/form-management/form-designer/answers/answer-types/selection-answers).
* **Errors** sind alle Farben, die von den Fehlermeldungen der Umfrage verwendet werden. Sie können die Vorschauumfrage dazu zwingen, alle Fehlermeldungen anzuzeigen, indem Sie die [preview errors option](https://docs.ngsurvey.com/de/form-management/style-branding/style-editor/style).

{% hint style="info" %}
Sie können auch jede der globalen Variablen in Ihrem [CSS code](https://docs.ngsurvey.com/de/form-management/style-branding/style-editor/css) mit dem var-Schlüsselwort verwenden, z. B.: color: **var(--ngs-text-color)**
{% endhint %}

## 🖍️ Eine Farbe auswählen

Klicken Sie auf ein Farbfeld, um den Farbwähler zu öffnen und die gewünschte Farbe auszuwählen.

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

Um eine Farbe zurückzusetzen, wählen Sie das leere Farbfeld oben rechts im Wähler.

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

## 🔤 Schriftarten wechseln

Zum Wechseln der Schriftarten öffnen Sie entweder das Schriftart-Auswahlfeld, um eine neue Schriftart aus der Liste verfügbarer Schriftarten auszuwählen.    

![](https://133942686-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" %}
Die Liste der verfügbaren Schriftarten verwendet Google Fonts. Wenn Sie keine Schriftarten sehen können, stellen Sie sicher, dass Sie korrekt [link your ngSurvey installation with Google Fonts](https://docs.ngsurvey.com/de/installation-setup/system-settings/google/google-web-font). 
{% endhint %}

Oder Sie können die Schriftarten auch manuell aus der Liste der Theme-Codevariablen ändern.

![](https://133942686-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" %}
Aus der Liste ausgewählte Schriftarten werden automatisch von den Google Fonts-Servern heruntergeladen, falls der Befragte die ausgewählte Schriftart nicht auf seinem Gerät installiert hat.
{% endhint %}