> 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/user-guides/themes-and-appearance.md).

# Themes and appearance

Make ZeroTick look the way you like. You can switch between a **Dark** and **Light** base, choose an accent color, build a full custom palette, and even set your own font. Every change previews live, so you always see it before you keep it.

{% hint style="info" %}
You can open the theme customizer without signing in. It sits in the footer at the bottom of the app, so it is there while you browse.
{% endhint %}

### Set your theme

{% stepper %}
{% step %}

#### Open the theme customizer

In the [footer](https://zerotick-trade.gitbook.io/documentation.v1.1/user-guides/the-footer-explained), press the palette button labeled **Customize theme**. The customizer opens as a window over the page.

![The Customize theme palette button in the footer](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/01-footer-palette-button.png)
{% endstep %}

{% step %}

#### Choose a base mode

Under **Base mode**, pick **Dark** or **Light**. Dark is the default. The base sets the overall brightness of the app; your accent and any custom colors sit on top of whichever base you choose.

![The Dark and Light base mode cards in the customizer](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/02-base-mode.png)
{% endstep %}

{% step %}

#### Pick an accent

Under **Preset**, choose an accent. **ZeroTick** is the default cyan-to-violet brand look. The named presets are **Astro**, **Neo**, **Crimson**, **Stealth Blue**, **Orange**, **Lavender**, **Sulu**, **Jet stream**, and **Turquoise**. Choose **Custom** to set your own, covered in the next section.

![The accent preset gallery with ZeroTick, the named presets, and Custom](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/03-accent-presets.png)
{% endstep %}

{% step %}

#### Keep your theme

Press **Apply** to save your theme. If you close the window without pressing Apply, using the X, the Escape key, or a click outside, your previous theme comes back, so nothing sticks until you confirm.

![The Reset all and Apply buttons at the bottom of the customizer](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/04-apply-button.png)
{% endstep %}
{% endstepper %}

{% hint style="success" %}
The whole app updates the moment you pick a base or a preset, so you see the finished look before you press Apply.
{% endhint %}

### Build a custom palette

Want something that is entirely yours? Choose **Custom** in the preset gallery, then set your colors.

#### Set the primary color

Set the **Primary color** with the color square or by typing a six-character hex code. This one color drives the accent across the app: buttons, links, focus rings, and highlights. The reset icon next to the field puts it back to the preset color.

#### Recolor by category

Below the primary color, five tabs let you recolor specific parts of the interface. Pick a tab, then adjust each color in the list. Every row has its own reset icon, so you can change one color and leave the rest.

| Tab             | What it recolors                                                 |
| --------------- | ---------------------------------------------------------------- |
| **Backgrounds** | The app background, cards, popovers, and hover chips             |
| **Text**        | Primary, secondary, and tertiary text, plus accent and link text |
| **Actions**     | The buy and sell colors, and their hover shades                  |
| **Candle**      | The body, border, and wick for up and down candles               |
| **Traffic**     | The success, warning, danger, and info status colors             |

![The Primary color picker and the five color category tabs with color rows](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/05-custom-palette.png)

{% hint style="info" %}
Most color changes preview across the app as you make them, so you can fine-tune a color and watch it land right away.
{% endhint %}

### Use a custom font

Prefer a different typeface? In the **Custom font** section, paste a Google Fonts link into the field and press **Load**. When the font loads, it applies to the body and data text across the app. Headings keep the ZeroTick brand font. Press **Clear** to go back to the default. The **Browse fonts** link opens Google Fonts if you need to find one.

![The Custom font field with the Load and Clear buttons](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/06-custom-font.png)

{% hint style="info" %}
Only Google Fonts links work here, for example a link from fonts.google.com. Other links are declined.
{% endhint %}

### Keep text readable

As you edit, the customizer checks your text colors against the app background using the WCAG AA standard, which needs a ratio of at least 4.5:1. The **Accessibility** section lists each text color with its ratio and a pass or warning mark.

If any color is too low, press **Fix low-contrast text**. The customizer nudges the flagged colors until they pass. You can still apply a low-contrast theme if you want it; the check is a helper, not a lock.

![The Accessibility contrast rows and the Fix low-contrast text button](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/07-contrast-check.png)

### Save, share, or start over

Your applied theme is saved for you automatically. The **Backup** section lets you carry it between devices or hand it to someone else.

* **Export** copies your theme as a short code to your clipboard. Paste it into Import on another device.
* **Import** opens a box where you paste a theme code, then press **Apply code** to load it.
* **Share** copies a link. When someone opens it, ZeroTick asks them whether to apply your theme; it never changes their app without asking.

To start fresh, press **Reset all** at the bottom of the customizer. That returns everything to the ZeroTick default. As always, press **Apply** to keep whatever you land on.

![The Export, Import, and Share buttons in the Backup section](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/08-backup-row.png)

<details>

<summary>Someone shared a theme link with me</summary>

When you open a ZeroTick theme link, a small window asks "Apply this theme?" and shows a preview of the accent color. Press **Apply** to use it, or **Cancel** to keep your current theme. Your app never changes until you choose, and you can change or reset it later from **Customize theme**.

</details>

<details>

<summary>My theme code will not import</summary>

If Import says the code looks invalid or incomplete, check that you copied the whole code with no missing characters, then paste it again. Theme codes come from **Export** and from **Share** links.

</details>

<details>

<summary>A font would not load</summary>

Make sure the link is a Google Fonts URL that starts with <https://fonts.googleapis.com>. If it still fails, open **Browse fonts**, choose a font, and copy its link again.

</details>

<details>

<summary>I closed the window and lost my changes</summary>

Changes only stick when you press **Apply**. Closing with the X, the Escape key, or a click outside reverts to your last applied theme. Reopen the customizer, set it up again, and press **Apply**.

</details>

### Related 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>The footer explained</strong></td><td>Every tool and link in the footer bar, including Customize theme.</td><td><a href="https://zerotick-trade.gitbook.io/documentation.v1.1/user-guides/the-footer-explained">https://zerotick-trade.gitbook.io/documentation.v1.1/user-guides/the-footer-explained</a></td></tr><tr><td><strong>Marketplace tour</strong></td><td>The three columns and how to move around the Marketplace.</td><td><a href="https://zerotick-trade.gitbook.io/documentation.v1.1/user-guides/marketplace-tour">https://zerotick-trade.gitbook.io/documentation.v1.1/user-guides/marketplace-tour</a></td></tr><tr><td><strong>Column filters</strong></td><td>Narrow each column to the tokens you care about.</td><td><a href="https://zerotick-trade.gitbook.io/documentation.v1.1/user-guides/filters">https://zerotick-trade.gitbook.io/documentation.v1.1/user-guides/filters</a></td></tr></tbody></table>