# Couleur, logo et favicon

Le résultat : un site aux couleurs de ton produit, avec des liens lisibles en clair comme en sombre.

**Avant de commencer** : un `docs.json` et les fichiers d’image que tu veux utiliser.

## La couleur

```json
{ "colors": { "primary": "#0f766e" } }
```

La couleur sert aux liens, aux éléments actifs de la navigation et aux renvois de l’assistant. Docs garde sa teinte et ajuste sa luminosité pour que les liens restent lisibles, avec un contraste d’au moins 4,5:1 sur le fond.

Pour une couleur différente en mode sombre, ajoute `dark` :

```json
{ "colors": { "primary": "#0f766e", "dark": "#5eead4" } }
```

Sans `colors`, le site prend la couleur de la marque HGDC.

> **Note**
>
> Dans la console, la section **Thème** de la page **Réglages** montre l’effet de la couleur en clair et en sombre, et prépare la ligne à copier dans `docs.json`.

## Le logo

Une seule image :

```json
{ "logo": "/images/logo.svg" }
```

Une image par thème :

```json
{ "logo": { "light": "/images/logo-clair.svg", "dark": "/images/logo-sombre.svg" } }
```

Le chemin part de la racine de la doc. Si `dark` est absent, l’image `light` sert dans les deux thèmes. Un SVG rend le mieux.

## Le favicon

```json
{ "favicon": "/images/favicon.svg" }
```

Sans `favicon`, le site demande `/favicon.svg` à la racine. Pense à le fournir, sinon le navigateur affiche une icône par défaut.

## Si ça ne marche pas

- **`couleur attendue au format #rrggbb`** : utilise un code hexadécimal à trois ou six chiffres, qui commence par `#`.
- **Le logo n’apparaît pas** : vérifie que le chemin commence par `/` et qu’il désigne bien un fichier du dossier de la doc.