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

{ "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 :

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

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

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 :

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

Une image par thème :

{ "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

{ "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.