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

# Themes and appearance

Haz que ZeroTick tenga el aspecto que te gusta. Puedes alternar entre una base **Dark** y **Light**, elegir un color de acento, crear una paleta totalmente personalizada e incluso definir tu propia fuente. Cada cambio se previsualiza en directo, así que siempre lo ves antes de conservarlo.

{% hint style="info" %}
Puedes abrir el personalizador de tema sin iniciar sesión. Está en el pie de página, en la parte inferior de la app, así que lo tienes a mano mientras navegas.
{% endhint %}

### Configura tu tema

{% stepper %}
{% step %}

#### Abre el personalizador de tema

En el [pie de página](https://zerotick-trade.gitbook.io/documentation.v1.1/es/user-guides/the-footer-explained), pulsa el botón de paleta con la etiqueta **Personalizar tema**. El personalizador se abre como una ventana sobre la página.

![El botón de paleta Personalizar tema en el pie de página](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/01-footer-palette-button.png)
{% endstep %}

{% step %}

#### Elige un modo base

En **Base mode**, elige **Dark** o **Light**. Dark es el valor por defecto. La base define el brillo general de la app; tu acento y cualquier color personalizado se colocan encima de la base que elijas.

![Las tarjetas de modo base Dark y Light en el personalizador](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/02-base-mode.png)
{% endstep %}

{% step %}

#### Elige un acento

En **Preset**, elige un acento. **ZeroTick** es el estilo de marca por defecto, de cian a violeta. Los presets con nombre son **Astro**, **Neo**, **Crimson**, **Stealth Blue**, **Orange**, **Lavender**, **Sulu**, **Jet stream** y **Turquoise**. Elige **Custom** para definir el tuyo, que se explica en la siguiente sección.

![La galería de presets de acento con ZeroTick, los presets con nombre y Custom](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/03-accent-presets.png)
{% endstep %}

{% step %}

#### Conserva tu tema

Pulsa **Apply** para guardar tu tema. Si cierras la ventana sin pulsar Apply, con la X, la tecla Escape o un clic fuera, vuelve tu tema anterior, así que nada se queda hasta que confirmas.

![Los botones Reset all y Apply en la parte inferior del personalizador](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/04-apply-button.png)
{% endstep %}
{% endstepper %}

{% hint style="success" %}
Toda la app se actualiza en el momento en que eliges una base o un preset, así que ves el aspecto final antes de pulsar Apply.
{% endhint %}

### Crea una paleta personalizada

¿Quieres algo totalmente tuyo? Elige **Custom** en la galería de presets y luego define tus colores.

#### Define el color principal

Define el **Primary color** con el cuadrado de color o escribiendo un código hexadecimal de seis caracteres. Ese único color impulsa el acento en toda la app: botones, enlaces, anillos de foco y resaltados. El icono de restablecer junto al campo lo devuelve al color del preset.

#### Recolorea por categoría

Debajo del color principal, cinco pestañas te permiten recolorear partes concretas de la interfaz. Elige una pestaña y luego ajusta cada color de la lista. Cada fila tiene su propio icono de restablecer, así que puedes cambiar un color y dejar el resto.

| Pestaña         | Qué recolorea                                                                  |
| --------------- | ------------------------------------------------------------------------------ |
| **Backgrounds** | El fondo de la app, las tarjetas, los popovers y los chips al pasar el cursor  |
| **Text**        | El texto principal, secundario y terciario, más el texto de acento y de enlace |
| **Actions**     | Los colores de compra y venta, y sus tonos al pasar el cursor                  |
| **Candle**      | El cuerpo, el borde y la mecha de las velas alcistas y bajistas                |
| **Traffic**     | Los colores de estado de éxito, advertencia, peligro e información             |

![El selector de Primary color y las cinco pestañas de categorías de color con sus filas de color](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/05-custom-palette.png)

{% hint style="info" %}
La mayoría de los cambios de color se previsualizan en toda la app a medida que los haces, así que puedes afinar un color y verlo aplicarse al instante.
{% endhint %}

### Usa una fuente personalizada

¿Prefieres otra tipografía? En la sección **Custom font**, pega un enlace de Google Fonts en el campo y pulsa **Load**. Cuando la fuente se carga, se aplica al texto del cuerpo y de los datos en toda la app. Los títulos conservan la fuente de marca de ZeroTick. Pulsa **Clear** para volver a la fuente por defecto. El enlace **Browse fonts** abre Google Fonts si necesitas encontrar una.

![El campo Custom font con los botones Load y Clear](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/06-custom-font.png)

{% hint style="info" %}
Aquí solo funcionan los enlaces de Google Fonts, por ejemplo un enlace de fonts.google.com. Los demás enlaces se rechazan.
{% endhint %}

### Mantén el texto legible

Mientras editas, el personalizador comprueba tus colores de texto contra el fondo de la app según el estándar WCAG AA, que exige una relación de al menos 4.5:1. La sección **Accessibility** enumera cada color de texto con su relación y una marca de aprobado o de advertencia.

Si algún color es demasiado bajo, pulsa **Fix low-contrast text**. El personalizador ajusta los colores señalados hasta que aprueban. Aún puedes aplicar un tema de bajo contraste si lo quieres; la comprobación es una ayuda, no un bloqueo.

![Las filas de contraste de Accessibility y el botón Fix low-contrast text](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/07-contrast-check.png)

### Guarda, comparte o empieza de cero

Tu tema aplicado se guarda automáticamente. La sección **Backup** te permite llevarlo de un dispositivo a otro o pasárselo a otra persona.

* **Export** copia tu tema como un código corto en el portapapeles. Pégalo en Import en otro dispositivo.
* **Import** abre un cuadro donde pegas un código de tema y luego pulsas **Apply code** para cargarlo.
* **Share** copia un enlace. Cuando alguien lo abre, ZeroTick le pregunta si quiere aplicar tu tema; nunca cambia su app sin preguntar.

Para empezar de cero, pulsa **Reset all** en la parte inferior del personalizador. Eso devuelve todo al valor por defecto de ZeroTick. Como siempre, pulsa **Apply** para conservar el resultado.

![Los botones Export, Import y Share en la sección Backup](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/08-backup-row.png)

<details>

<summary>Alguien me compartió un enlace de tema</summary>

Cuando abres un enlace de tema de ZeroTick, una pequeña ventana pregunta «Apply this theme?» y muestra una vista previa del color de acento. Pulsa **Apply** para usarlo, o **Cancel** para conservar tu tema actual. Tu app no cambia hasta que eliges, y puedes cambiarlo o restablecerlo más tarde desde **Personalizar tema**.

</details>

<details>

<summary>Mi código de tema no se importa</summary>

Si Import dice que el código parece no válido o incompleto, comprueba que copiaste el código entero, sin caracteres que falten, y pégalo de nuevo. Los códigos de tema provienen de **Export** y de los enlaces **Share**.

</details>

<details>

<summary>Una fuente no se cargaba</summary>

Asegúrate de que el enlace es una URL de Google Fonts que empieza por <https://fonts.googleapis.com>. Si sigue fallando, abre **Browse fonts**, elige una fuente y copia su enlace de nuevo.

</details>

<details>

<summary>Cerré la ventana y perdí mis cambios</summary>

Los cambios solo se conservan cuando pulsas **Apply**. Cerrar con la X, la tecla Escape o un clic fuera revierte a tu último tema aplicado. Vuelve a abrir el personalizador, configúralo de nuevo y pulsa **Apply**.

</details>

### Guías relacionadas

<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>El pie de página en detalle</strong></td><td>Todas las herramientas y enlaces de la barra de pie de página, incluido Personalizar tema.</td><td><a href="https://zerotick-trade.gitbook.io/documentation.v1.1/es/user-guides/the-footer-explained">https://zerotick-trade.gitbook.io/documentation.v1.1/es/user-guides/the-footer-explained</a></td></tr><tr><td><strong>Recorrido por el Mercado</strong></td><td>Las tres columnas y cómo moverte por el Mercado.</td><td><a href="https://zerotick-trade.gitbook.io/documentation.v1.1/es/user-guides/marketplace-tour">https://zerotick-trade.gitbook.io/documentation.v1.1/es/user-guides/marketplace-tour</a></td></tr><tr><td><strong>Filtros de columna</strong></td><td>Restringe cada columna a los tokens que te interesan.</td><td><a href="https://zerotick-trade.gitbook.io/documentation.v1.1/es/user-guides/filters">https://zerotick-trade.gitbook.io/documentation.v1.1/es/user-guides/filters</a></td></tr></tbody></table>