> For the complete documentation index, see [llms.txt](https://zerotick-trade.gitbook.io/documentation.v1.2/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zerotick-trade.gitbook.io/documentation.v1.2/de/user-guides/themes-and-appearance.md).

# Design und Darstellung

Gestalte ZeroTick so, wie es dir gefällt. Du kannst zwischen einer **Dark**- und einer **Light**-Basis wechseln, eine Akzentfarbe wählen, eine vollständig eigene Palette bauen und sogar deine eigene Schriftart festlegen. Jede Änderung wird live in der Vorschau gezeigt, sodass du sie immer siehst, bevor du sie behältst.

{% hint style="info" %}
Du kannst die Design-Anpassung öffnen, ohne dich anzumelden. Sie befindet sich in der Fußzeile am unteren Rand der App, ist also da, während du stöberst.
{% endhint %}

### Dein Design festlegen

{% stepper %}
{% step %}

#### Öffne die Design-Anpassung

Drücke in der [Fußzeile](https://zerotick-trade.gitbook.io/documentation.v1.1/de/user-guides/the-footer-explained) den Palette-Button **Design anpassen**. Die Design-Anpassung öffnet sich als Fenster über der Seite.

![Der Palette-Button „Design anpassen“ in der Fußzeile](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/01-footer-palette-button.png)
{% endstep %}

{% step %}

#### Wähle einen Base mode

Unter **Base mode** wählst du **Dark** oder **Light**. Dark ist die Standardeinstellung. Die Basis legt die Gesamthelligkeit der App fest; dein Akzent und alle eigenen Farben liegen über der von dir gewählten Basis.

![Die Base-mode-Karten Dark und Light in der Design-Anpassung](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/02-base-mode.png)
{% endstep %}

{% step %}

#### Wähle einen Akzent

Unter **Preset** wählst du einen Akzent. **ZeroTick** ist der Standard-Markenlook von Cyan zu Violett. Die benannten Presets sind **Astro**, **Neo**, **Crimson**, **Stealth Blue**, **Orange**, **Lavender**, **Sulu**, **Jet stream** und **Turquoise**. Wähle **Custom**, um deinen eigenen festzulegen, behandelt im nächsten Abschnitt.

![Die Akzent-Preset-Galerie mit ZeroTick, den benannten Presets und Custom](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/03-accent-presets.png)
{% endstep %}

{% step %}

#### Behalte dein Design

Drücke **Apply**, um dein Design zu speichern. Wenn du das Fenster ohne **Apply** schließt, über das X, die Escape-Taste oder einen Klick außerhalb, kommt dein vorheriges Design zurück, sodass nichts hängen bleibt, bis du bestätigst.

![Die Buttons Reset all und Apply unten in der Design-Anpassung](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/04-apply-button.png)
{% endstep %}
{% endstepper %}

{% hint style="success" %}
Die ganze App aktualisiert sich in dem Moment, in dem du eine Basis oder ein Preset wählst, sodass du den fertigen Look siehst, bevor du **Apply** drückst.
{% endhint %}

### Eine eigene Palette bauen

Willst du etwas ganz Eigenes? Wähle **Custom** in der Preset-Galerie und lege dann deine Farben fest.

#### Lege die Primärfarbe fest

Lege die **Primary color** über das Farbquadrat oder durch Eingabe eines sechsstelligen Hex-Codes fest. Diese eine Farbe treibt den Akzent in der gesamten App an: Buttons, Links, Fokusringe und Hervorhebungen. Das Reset-Symbol neben dem Feld setzt sie auf die Preset-Farbe zurück.

#### Färbe nach Kategorie um

Unter der Primärfarbe kannst du über fünf Tabs bestimmte Teile der Oberfläche umfärben. Wähle einen Tab und passe dann jede Farbe in der Liste an. Jede Zeile hat ihr eigenes Reset-Symbol, sodass du eine Farbe ändern und den Rest lassen kannst.

| Tab             | Was er umfärbt                                                |
| --------------- | ------------------------------------------------------------- |
| **Backgrounds** | Den App-Hintergrund, Karten, Popover und Hover-Chips          |
| **Text**        | Primär-, Sekundär- und Tertiärtext sowie Akzent- und Linktext |
| **Actions**     | Die Kauf- und Verkaufsfarben und ihre Hover-Töne              |
| **Candle**      | Körper, Rand und Docht für steigende und fallende Kerzen      |
| **Traffic**     | Die Statusfarben für Erfolg, Warnung, Gefahr und Info         |

![Der Primary-color-Picker und die fünf Farbkategorie-Tabs mit ihren Farbzeilen](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/05-custom-palette.png)

{% hint style="info" %}
Die meisten Farbänderungen erscheinen sofort als Vorschau in der App, sodass du eine Farbe fein abstimmen und sofort wirken sehen kannst.
{% endhint %}

### Eine eigene Schriftart verwenden

Bevorzugst du eine andere Schrift? Füge im Abschnitt **Custom font** einen Google-Fonts-Link in das Feld ein und drücke **Load**. Sobald die Schrift geladen ist, gilt sie für den Fließ- und Datentext in der gesamten App. Überschriften behalten die ZeroTick-Markenschrift. Drücke **Clear**, um zum Standard zurückzukehren. Der Link **Browse fonts** öffnet Google Fonts, falls du eine suchen musst.

![Das Feld Custom font mit den Buttons Load und Clear](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/06-custom-font.png)

{% hint style="info" %}
Hier funktionieren nur Google-Fonts-Links, zum Beispiel ein Link von fonts.google.com. Andere Links werden abgelehnt.
{% endhint %}

### Text lesbar halten

Während du bearbeitest, prüft die Design-Anpassung deine Textfarben gegen den App-Hintergrund nach dem WCAG-AA-Standard, der ein Verhältnis von mindestens 4.5:1 verlangt. Der Abschnitt **Accessibility** listet jede Textfarbe mit ihrem Verhältnis und einer Bestanden- oder Warnmarkierung auf.

Wenn eine Farbe zu niedrig ist, drücke **Fix low-contrast text**. Die Design-Anpassung stupst die markierten Farben an, bis sie bestehen. Du kannst ein kontrastschwaches Design trotzdem anwenden, wenn du es möchtest; die Prüfung ist eine Hilfe, keine Sperre.

![Die Accessibility-Kontrastzeilen und der Button Fix low-contrast text](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/07-contrast-check.png)

### Speichern, teilen oder neu beginnen

Dein angewendetes Design wird automatisch für dich gespeichert. Der Abschnitt **Backup** lässt dich es zwischen Geräten mitnehmen oder an jemand anderen weitergeben.

* **Export** kopiert dein Design als kurzen Code in deine Zwischenablage. Füge ihn auf einem anderen Gerät in Import ein.
* **Import** öffnet ein Feld, in das du einen Design-Code einfügst, und drückst dann **Apply code**, um ihn zu laden.
* **Share** kopiert einen Link. Wenn ihn jemand öffnet, fragt ZeroTick ihn, ob dein Design angewendet werden soll; es ändert seine App nie ungefragt.

Um neu zu beginnen, drücke unten in der Design-Anpassung **Reset all**. Das setzt alles auf den ZeroTick-Standard zurück. Wie immer drücke **Apply**, um zu behalten, wobei du landest.

![Die Buttons Export, Import und Share im Abschnitt Backup](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/08-backup-row.png)

<details>

<summary>Jemand hat mir einen Design-Link geteilt</summary>

Wenn du einen ZeroTick-Design-Link öffnest, fragt ein kleines Fenster „Apply this theme?“ und zeigt eine Vorschau der Akzentfarbe. Drücke **Apply**, um es zu verwenden, oder **Cancel**, um dein aktuelles Design zu behalten. Deine App ändert sich erst, wenn du dich entscheidest, und du kannst es später über **Design anpassen** ändern oder zurücksetzen.

</details>

<details>

<summary>Mein Design-Code lässt sich nicht importieren</summary>

Wenn Import meldet, dass der Code ungültig oder unvollständig aussieht, prüfe, ob du den ganzen Code ohne fehlende Zeichen kopiert hast, und füge ihn erneut ein. Design-Codes stammen aus **Export** und aus **Share**-Links.

</details>

<details>

<summary>Eine Schrift ließ sich nicht laden</summary>

Stelle sicher, dass der Link eine Google-Fonts-URL ist, die mit <https://fonts.googleapis.com> beginnt. Wenn es weiterhin fehlschlägt, öffne **Browse fonts**, wähle eine Schrift und kopiere ihren Link erneut.

</details>

<details>

<summary>Ich habe das Fenster geschlossen und meine Änderungen verloren</summary>

Änderungen bleiben nur erhalten, wenn du **Apply** drückst. Ein Schließen über das X, die Escape-Taste oder einen Klick außerhalb kehrt zu deinem zuletzt angewendeten Design zurück. Öffne die Design-Anpassung erneut, richte sie wieder ein und drücke **Apply**.

</details>

### Verwandte Guides

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Die Fußzeile im Detail</strong></td><td>Jedes Werkzeug und jeder Link in der Fußzeilenleiste, einschließlich Design anpassen.</td><td><a href="https://zerotick-trade.gitbook.io/documentation.v1.1/de/user-guides/the-footer-explained">https://zerotick-trade.gitbook.io/documentation.v1.1/de/user-guides/the-footer-explained</a></td></tr><tr><td><strong>Marktplatz-Rundgang</strong></td><td>Die drei Spalten und wie du dich auf dem Marktplatz bewegst.</td><td><a href="https://zerotick-trade.gitbook.io/documentation.v1.1/de/user-guides/marketplace-tour">https://zerotick-trade.gitbook.io/documentation.v1.1/de/user-guides/marketplace-tour</a></td></tr><tr><td><strong>Spaltenfilter</strong></td><td>Grenze jede Spalte auf die Token ein, die dich interessieren.</td><td><a href="https://zerotick-trade.gitbook.io/documentation.v1.1/de/user-guides/filters">https://zerotick-trade.gitbook.io/documentation.v1.1/de/user-guides/filters</a></td></tr></tbody></table>