Aller au contenu

Comment personnaliser l'apparence de votre documentation (thèmes, couleurs et polices)

Vous pouvez personnaliser l'apparence de votre documentation publiée pour l'aligner sur votre image de marque. Ces paramètres se trouvent dans les Paramètres du projet, sous l'onglet Publication > Thèmes et couleurs. Cela vous permet de contrôler le thème, les couleurs, les polices et les autres éléments stylistiques que vos visiteurs verront.

Choisir un mode de thème

Le paramètre Mode de thème par défaut détermine l'apparence initiale de votre documentation pour les visiteurs. Vous pouvez choisir un thème spécifique ou permettre à celui-ci de s'adapter aux paramètres système de l'utilisateur.

  • Auto (suivre la préférence système) : Il s'agit de l'option par défaut. La documentation basculera automatiquement entre les thèmes clair et sombre en fonction de la préférence du système d'exploitation du visiteur.
  • Clair : Votre documentation sera toujours affichée en utilisant le thème clair, indépendamment des paramètres système de l'utilisateur.
  • Sombre : Votre documentation sera toujours affichée en utilisant le thème sombre.
Documentation image

Vous pouvez importer des logos distincts pour les thèmes clair et sombre afin de garantir qu'ils soient toujours visibles et conformes à votre image de marque. Si aucun logo n'est importé, le texte que vous avez fourni sera affiché à la place.

  • Logo du thème clair : Importez un logo qui est mieux mis en valeur sur les arrière-plans clairs.
  • Logo du thème sombre : Importez un logo conçu pour les arrière-plans sombres.
  • Texte du logo (thème clair/sombre) : Saisissez le nom de votre marque ou un autre texte à afficher si le logo correspondant n'est pas disponible.
Documentation image

Personnalisation des couleurs

Définissez la palette de couleurs de votre marque en choisissant des couleurs primaires et secondaires pour les thèmes clair et sombre. Cela garantit une expérience de marque cohérente dans les différents modes d'affichage.

  • Couleur primaire : Il s'agit de la couleur d'accentuation principale utilisée pour les éléments interactifs tels que les boutons, les liens et les éléments mis en avant.
  • Couleur secondaire : Cette couleur est utilisée pour les éléments de soutien, offrant un contraste subtil.
Documentation image

Paramètres de police et de style

Affinez davantage l'apparence de votre documentation en sélectionnant les polices et en ajustant le style des coins des éléments de l'interface utilisateur.

  • Famille de police primaire : Choisissez la police principale pour tous les titres, le corps de texte et les éléments généraux de l'interface à partir de la liste fournie.
  • Famille de police à chasse fixe : Sélectionnez une police spécifiquement pour les blocs de code et les extraits de code en ligne.
  • Style des coins : Ajustez le rayon des bordures pour les éléments de l'interface. Les options incluent Aigus (0 px), Arrondis (4 px) et Très arrondis (8 px).
Documentation image

Conseils de personnalisation

N'oubliez pas d'enregistrer vos modifications, puis de cliquer sur le bouton Publier les modifications en haut des paramètres de publication pour rendre vos mises à jour effectives. Utilisez toujours des combinaisons de couleurs à fort contraste pour une meilleure lisibilité, en particulier pour le texte et les éléments interactifs.

Résumé

Cet article détaille comment personnaliser l'apparence visuelle de votre site de documentation Hinto publié. Il couvre la sélection d'un mode de thème par défaut, l'importation de logos personnalisés pour les arrière-plans clairs et sombres, la définition des couleurs de marque primaires et secondaires, ainsi que le choix des polices pour créer un rendu professionnel et soigné, aligné sur votre image de marque.

Sur le même sujet