---
language: de
title: So passt du die Farben des TuCalendi-Widgets an
category: Widget
summary: Erfahre, wie du mit einer Designvorlage die Farben des TuCalendi-Widgets an das Markenbild deines Unternehmens anpasst.
---

# So passt du die Farben des TuCalendi-Widgets an

In diesem Tutorial erfährst du, wie du die Farben des TuCalendi-Widgets mit einer **Designvorlage** anpasst. Die Farben bestimmen die **visuelle Identität** des Widgets und ermöglichen es dir, es an das **Markenbild** jedes Unternehmens anzupassen.

Wenn du eine neue Designvorlage erstellst, werden alle Farbfelder automatisch mit **Standardeinstellungen** ausgefüllt. Anschließend kannst du jede Farbe einzeln ändern, um den gewünschten Look zu erreichen.

Das Widget verfügt über sechs einzelne Farbfelder und ein zusätzliches Feld für das allgemeine Farbthema:

- **Primärfarbe**. Die Hauptfarbe der Oberfläche: Schaltflächen, Tage und hervorgehobene Elemente.
- **Sekundärfarbe**. Akzentfarbe für sekundäre Elemente.
- **Haupttextfarbe**.
- **Sekundäre Textfarbe**.
- **Hervorhebungsfarbe**. Wird verwendet, um Elemente innerhalb des Widgets hervorzuheben.
- **Hintergrundfarbe**
- **Farbthema**. Allgemeiner Anzeigemodus: Auto, Hell oder Dunkel.

## Bevor du beginnst

Um diesem Tutorial zu folgen, musst du zum Bereich **Erscheinungsbild** des Widgets navigieren und eine Designvorlage erstellt haben, die du bearbeiten kannst. Den vollständigen Ablauf zum Erstellen und Zuweisen von Vorlagen findest du im allgemeinen Tutorial dazu, [wie du eine Designvorlage für das Widget erstellst und zuweist](https://www.tucalendi.com/en/s/widget/how-to-customize-the-appearance-of-the-new-tucalendi-widget).

## Schritt 1. Öffne die Einstellungen für das Erscheinungsbild des Widgets

Gehe im Seitenmenü von TuCalendi zum Bereich **"Widgets"** und wähle die Option **"Erscheinungsbild"**.

![Widget-Erscheinungsbild](https://www.tucalendi.com/images/content/widget/en/widget-appearance.png)

## Schritt 2. Erstelle oder bearbeite eine Vorlage für das Erscheinungsbild

Erstelle im Bereich **"Erscheinungsbild"** eine neue Vorlage oder bearbeite eine bestehende, indem du auf **"Bearbeiten"** klickst.

![Widget-Erscheinungsbild bearbeiten](https://www.tucalendi.com/images/content/widget/en/edit-widget-apperance-template.png)

## Schritt 3. Prüfe die Standard-Farbeinstellungen

Wenn du eine neue Vorlage erstellst, werden alle Farbfelder automatisch mit **Standardwerten** ausgefüllt. Der folgende Screenshot zeigt, wie der Editor mit den Standard-Farbeinstellungen aussieht.

![Standardvorlage für das Widget-Erscheinungsbild](https://www.tucalendi.com/images/content/widget/en/widget-appearance-template-by-default.png)

## Schritt 4. Passe die Farben der Vorlage an

Klicke auf eines der Farbfelder, um es zu öffnen, und wähle den gewünschten Wert aus. Du kannst jedes Feld unabhängig voneinander ändern:

- **Primärfarbe**: betrifft die Hauptschaltflächen, die ausgewählten Tage im Kalender und die auffälligsten Elemente der Oberfläche.
- **Sekundärfarbe**: gilt für unterstützende Elemente der Oberfläche.
- **Haupttextfarbe**: steuert die Farbe des Haupttextes, der im Widget sichtbar ist.
- **Sekundäre Textfarbe**: steuert die Farbe von sekundärem Text, zum Beispiel Beschreibungen und Beschriftungen.
- **Hervorhebungsfarbe**: wird verwendet, um besondere Elemente hervorzuheben, zum Beispiel Benachrichtigungen oder wichtige Aktionen.
- **Hintergrundfarbe**: legt die Hintergrundfarbe des Widgets fest.
- **Farbthema**: hier kannst du zwischen **Auto** (das Widget passt sein Aussehen an den hellen oder dunklen Modus des Systems des Nutzers an), **Hell** (immer im hellen Modus) oder **Dunkel** (immer im dunklen Modus) wählen.

Der folgende Screenshot zeigt den Editor mit den Farben von TuCalendi als Beispiel für eine Anpassung.

![Vorlage für das Widget-Erscheinungsbild mit den Farben von TuCalendi](https://www.tucalendi.com/images/content/widget/en/widget-appearance-template-tucalendi-colors.png)

## Schritt 5. Speichere die Änderungen

Nachdem du alle gewünschten Farben eingestellt hast, klicke auf **"Speichern"**, um die Änderungen auf die Designvorlage anzuwenden.

## Schritt 6. Prüfe die Zuweisung zu einem Element

Sobald die Vorlage gespeichert ist, prüfe, ob sie dem entsprechenden **Hub** oder der **Umfrage mit Weiterleitung** zugewiesen ist. Wenn die Vorlage keinem Element zugewiesen ist, werden die Änderungen in keinem Widget angezeigt.

![Vorlage für das Widget-Erscheinungsbild mit zugewiesenem Element](https://www.tucalendi.com/images/content/widget/en/widget-appearance-template-with-element.png)

## Schritt 7. Prüfe das Ergebnis im Widget

Sobald die Farben eingestellt und die Änderungen gespeichert sind, zeigt das Widget die neue **Farbpalette** auf allen seinen Bildschirmen an. Der folgende Screenshot zeigt, wie die Farbanpassung im Widget aussieht, das der Endnutzer sieht.

![Widget mit den Farben von TuCalendi](https://www.tucalendi.com/images/content/widget/en/widget-with-tucalendi-colors.png)

## Zusammenfassung des Ablaufs

Um die Farben des Widgets anzupassen, gehe zu **"Widget-Erscheinungsbild"**, erstelle oder bearbeite eine Vorlage und ändere die verfügbaren Farbfelder: Primärfarbe, Sekundärfarbe, Haupttextfarbe, sekundäre Textfarbe, Hervorhebungsfarbe, Hintergrundfarbe und Farbthema. Beim Erstellen einer neuen Vorlage werden alle Felder mit Standardwerten ausgefüllt, die du frei ändern kannst. Klicke auf **"Speichern"**, prüfe, ob die Vorlage dem entsprechenden Hub oder der entsprechenden Umfrage zugewiesen ist, und sieh dir an, wie das Widget nach der Farbanpassung aussieht.