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

# Thèmes et apparence

Donnez à ZeroTick l'apparence qui vous plaît. Vous pouvez basculer entre une base **Dark** et une base **Light**, choisir une couleur d'accent, construire une palette entièrement personnalisée et même définir votre propre police. Chaque changement se prévisualise en direct, vous voyez donc toujours le résultat avant de le garder.

{% hint style="info" %}
Vous pouvez ouvrir l'outil de personnalisation du thème sans être connecté. Il se trouve dans le pied de page, en bas de l'application, et reste donc à portée pendant que vous naviguez.
{% endhint %}

### Définir votre thème

{% stepper %}
{% step %}

#### Ouvrez l'outil de personnalisation du thème

Dans le [pied de page](https://zerotick-trade.gitbook.io/documentation.v1.1/fr/user-guides/the-footer-explained), cliquez sur le bouton palette **Personnaliser le thème**. L'outil s'ouvre dans une fenêtre par-dessus la page.

![Le bouton palette Personnaliser le thème dans le pied de page](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/01-footer-palette-button.png)
{% endstep %}

{% step %}

#### Choisissez un mode de base

Sous **Base mode**, choisissez **Dark** ou **Light**. Dark est le mode par défaut. La base règle la luminosité générale de l'application ; votre accent et vos éventuelles couleurs personnalisées se posent par-dessus la base choisie.

![Les cartes de mode de base Dark et Light dans l'outil de personnalisation](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/02-base-mode.png)
{% endstep %}

{% step %}

#### Choisissez un accent

Sous **Preset**, choisissez un accent. **ZeroTick** est le style de marque par défaut, du cyan vers le violet. Les presets nommés sont **Astro**, **Neo**, **Crimson**, **Stealth Blue**, **Orange**, **Lavender**, **Sulu**, **Jet stream** et **Turquoise**. Choisissez **Custom** pour définir le vôtre, couvert dans la section suivante.

![La galerie de presets d'accent avec ZeroTick, les presets nommés et Custom](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/03-accent-presets.png)
{% endstep %}

{% step %}

#### Gardez votre thème

Cliquez sur **Apply** pour enregistrer votre thème. Si vous fermez la fenêtre sans avoir cliqué sur Apply, avec le X, la touche Échap ou un clic à l'extérieur, votre thème précédent revient : rien n'est conservé tant que vous n'avez pas confirmé.

![Les boutons Reset all et Apply en bas de l'outil de personnalisation](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/04-apply-button.png)
{% endstep %}
{% endstepper %}

{% hint style="success" %}
Toute l'application se met à jour dès que vous choisissez une base ou un preset, vous voyez donc le rendu final avant de cliquer sur Apply.
{% endhint %}

### Construire une palette personnalisée

Envie d'un style qui ne ressemble qu'à vous ? Choisissez **Custom** dans la galerie de presets, puis réglez vos couleurs.

#### Définissez la couleur principale

Réglez la **Primary color** avec le carré de couleur ou en tapant un code hexadécimal à six caractères. Cette seule couleur pilote l'accent dans toute l'application : boutons, liens, indicateurs de focus et surlignages. L'icône de réinitialisation à côté du champ la ramène à la couleur du preset.

#### Recolorez par catégorie

Sous la couleur principale, cinq onglets permettent de recolorer des parties précises de l'interface. Choisissez un onglet, puis ajustez chaque couleur de la liste. Chaque ligne a sa propre icône de réinitialisation, vous pouvez donc changer une couleur et laisser le reste.

| Onglet          | Ce qu'il recolore                                                                |
| --------------- | -------------------------------------------------------------------------------- |
| **Backgrounds** | Le fond de l'application, les cartes, les popovers et les puces de survol        |
| **Text**        | Le texte principal, secondaire et tertiaire, plus le texte d'accent et les liens |
| **Actions**     | Les couleurs d'achat et de vente, et leurs nuances au survol                     |
| **Candle**      | Le corps, la bordure et la mèche des bougies haussières et baissières            |
| **Traffic**     | Les couleurs d'état succès, avertissement, danger et information                 |

![Le sélecteur Primary color et les cinq onglets de catégories de couleurs avec leurs lignes](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/05-custom-palette.png)

{% hint style="info" %}
La plupart des changements de couleur se prévisualisent dans l'application au fur et à mesure : vous pouvez affiner une couleur et la voir se poser aussitôt.
{% endhint %}

### Utiliser une police personnalisée

Vous préférez un autre caractère ? Dans la section **Custom font**, collez un lien Google Fonts dans le champ et cliquez sur **Load**. Une fois la police chargée, elle s'applique au texte courant et aux données dans toute l'application. Les titres conservent la police de la marque ZeroTick. Cliquez sur **Clear** pour revenir à la police par défaut. Le lien **Browse fonts** ouvre Google Fonts s'il vous en faut une.

![Le champ Custom font avec les boutons Load et Clear](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/06-custom-font.png)

{% hint style="info" %}
Seuls les liens Google Fonts fonctionnent ici, par exemple un lien de fonts.google.com. Les autres liens sont refusés.
{% endhint %}

### Garder le texte lisible

Pendant que vous éditez, l'outil vérifie vos couleurs de texte par rapport au fond de l'application selon la norme WCAG AA, qui demande un ratio d'au moins 4.5:1. La section **Accessibility** liste chaque couleur de texte avec son ratio et une marque de réussite ou d'avertissement.

Si une couleur est trop basse, cliquez sur **Fix low-contrast text**. L'outil ajuste les couleurs signalées jusqu'à ce qu'elles passent. Vous pouvez tout de même appliquer un thème à faible contraste si vous y tenez ; la vérification est une aide, pas un verrou.

![Les lignes de contraste Accessibility et le bouton Fix low-contrast text](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/07-contrast-check.png)

### Enregistrer, partager ou repartir de zéro

Votre thème appliqué est enregistré pour vous automatiquement. La section **Backup** vous permet de l'emporter d'un appareil à l'autre ou de le confier à quelqu'un d'autre.

* **Export** copie votre thème sous forme de code court dans votre presse-papiers. Collez-le dans Import sur un autre appareil.
* **Import** ouvre une zone où coller un code de thème ; cliquez ensuite sur **Apply code** pour le charger.
* **Share** copie un lien. Quand quelqu'un l'ouvre, ZeroTick lui demande s'il veut appliquer votre thème ; son application ne change jamais sans le lui demander.

Pour repartir de zéro, cliquez sur **Reset all** en bas de l'outil. Tout revient au réglage ZeroTick par défaut. Comme toujours, cliquez sur **Apply** pour garder le résultat.

![Les boutons Export, Import et Share dans la section Backup](https://raw.githubusercontent.com/ZeroTick-Trade/Public-Assets/fc4b0ba1ac314416cfe6e18023733135090ba516/docs/guides/getting-around/themes-appearance/08-backup-row.png)

<details>

<summary>Quelqu'un m'a partagé un lien de thème</summary>

Quand vous ouvrez un lien de thème ZeroTick, une petite fenêtre demande « Apply this theme? » et montre un aperçu de la couleur d'accent. Cliquez sur **Apply** pour l'utiliser, ou sur **Cancel** pour garder votre thème actuel. Votre application ne change pas tant que vous n'avez pas choisi, et vous pouvez modifier ou réinitialiser le thème plus tard depuis **Personnaliser le thème**.

</details>

<details>

<summary>Mon code de thème ne s'importe pas</summary>

Si Import indique que le code semble invalide ou incomplet, vérifiez que vous avez copié le code entier, sans caractère manquant, puis collez-le à nouveau. Les codes de thème proviennent d'**Export** et des liens **Share**.

</details>

<details>

<summary>Une police ne se charge pas</summary>

Vérifiez que le lien est une URL Google Fonts qui commence par <https://fonts.googleapis.com>. Si le chargement échoue encore, ouvrez **Browse fonts**, choisissez une police et copiez son lien à nouveau.

</details>

<details>

<summary>J'ai fermé la fenêtre et perdu mes changements</summary>

Les changements ne sont conservés que lorsque vous cliquez sur **Apply**. Fermer avec le X, la touche Échap ou un clic à l'extérieur fait revenir le dernier thème appliqué. Rouvrez l'outil, refaites vos réglages et cliquez sur **Apply**.

</details>

### Guides associés

<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>Le pied de page en détail</strong></td><td>Chaque outil et lien de la barre de pied de page, y compris Personnaliser le thème.</td><td><a href="https://zerotick-trade.gitbook.io/documentation.v1.1/fr/user-guides/the-footer-explained">https://zerotick-trade.gitbook.io/documentation.v1.1/fr/user-guides/the-footer-explained</a></td></tr><tr><td><strong>Visite guidée du Marché</strong></td><td>Les trois colonnes et comment se déplacer dans le Marché.</td><td><a href="https://zerotick-trade.gitbook.io/documentation.v1.1/fr/user-guides/marketplace-tour">https://zerotick-trade.gitbook.io/documentation.v1.1/fr/user-guides/marketplace-tour</a></td></tr><tr><td><strong>Filtres de colonne</strong></td><td>Restreignez chaque colonne aux tokens qui vous intéressent.</td><td><a href="https://zerotick-trade.gitbook.io/documentation.v1.1/fr/user-guides/filters">https://zerotick-trade.gitbook.io/documentation.v1.1/fr/user-guides/filters</a></td></tr></tbody></table>