Icônes, couleurs et thèmes

Personnalisez les icônes, les couleurs, les thèmes et d’autres réglages plus précis dans votre documentation publiée

Titre, icône et logo

Titre

Vous pouvez définir le titre de votre choix pour votre site. Remarque : ce paramètre n'affectera que le titre affiché dans la documentation publiée. Si vous souhaitez modifier le titre dans l'application GitBook, fermez le menu de personnalisation et modifiez-le en haut de la section.

Icône

Vous pouvez définir un emoji ou importer votre propre icône. L'icône que vous définissez dans le Personnaliser menu sera utilisée comme favicon pour votre site de documentation. Les modifications peuvent prendre quelques minutes avant d'apparaître dans votre documentation publiée — si vous ne voyez pas la nouvelle favicon, il se peut que votre navigateur ait mis en cache l'ancienne, essayez donc un autre navigateur.

Ce paramètre n'affectera que l'icône affichée dans la documentation publiée. Si vous souhaitez modifier l'icône utilisée dans l'application GitBook, vous pouvez le faire lors de l'édition du contenu dans la section elle-même.

Logo personnalisé

Vous pouvez remplacer à la fois le titre et l'icône du site publié par un logo personnalisé afin que votre documentation reflète mieux votre propre identité visuelle — et vous pouvez importer deux versions : une pour le mode clair et une pour le mode sombre.

Quelle est la différence entre les options icône et logo ?

Le paramètre d'icône vous permet d'importer une petite image de 132×132 px, qui apparaîtra à côté de du titre de votre site et servira de favicon pour votre site. L'option de logo personnalisé vous permet d'importer une image plus grande (nous recommandons au moins 600 px de large), qui remplacera entièrement toute icône et tout titre que vous avez définis.

Thèmes

Les thèmes vous permettent de personnaliser la palette de couleurs de votre contenu publié pour les modes clair et sombre. Il existe quatre thèmes au choix. Les couleurs de votre site seront directement influencées par la couleur principale et teinte que vous choisissez. Ces deux sélections affectent diverses parties de l'interface et peuvent complètement changer l'apparence et l'ambiance de votre site.

Épuré

Un thème moderne présentant de la translucidité et des éléments au style minimaliste. Votre couleur principale (ou teinte) affecte les liens et autres éléments d'interface mis en évidence.

Épuré est disponible pour tous les sites et constitue le thème par défaut.

Atténué

Un thème sophistiqué avec un contraste réduit entre les éléments. L'arrière-plan du site est plus prononcé et se fond dans le premier plan, et certains éléments affichent un aspect inversé — le tout selon votre couleur principale (ou teinte).

Atténué est disponible pour tous les sites.

Audacieux

Un thème percutant aux couleurs marquées et aux forts contrastes. Votre couleur principale (ou teinte) sera utilisée pour l'en-tête du site, et d'autres éléments mis en évidence comme les icônes seront colorés en conséquence.

Audacieux est disponible uniquement pour les sites Premium ou Ultimate.

Dégradé

Un thème tendance avec un arrière-plan en dégradé et des touches de couleur. Le dégradé et les éléments mis en évidence seront colorés par votre couleur principale (ou teinte).

Dégradé est disponible uniquement pour les sites Premium ou Ultimate.

Couleurs

Couleur principale

La couleur principale de votre site influencera le style des éléments d'interface mis en évidence et des éléments de navigation comme les liens, la page et la section en cours, le fil d'Ariane et les boutons principaux de l'en-tête.

GitBook ajuste automatiquement les couleurs de certains éléments pour améliorer la lisibilité si le contraste avec l'arrière-plan est trop faible ou si le système d'un visiteur demande un contraste plus élevé.

Couleur de teinte

La couleur de teinte de votre site modifiera subtilement la couleur de tout le texte et de toutes les icônes sur l'ensemble de votre site — y compris les liens de l'en-tête, la couleur des icônes et les éléments d'interface comme la Demander ou rechercher barre.

La couleur de teinte ne modifiera pas les éléments de navigation comme les liens et les boutons, qui utilisent toujours la couleur principale.

Dans la Couleur de teinte section, vous verrez des couleurs suggérées en fonction de votre sélection de couleur principale. Vous pouvez en choisir une pour l'aperçu, choisir votre couleur principale comme teinte, ou sélectionner une couleur entièrement personnalisée avec le sélecteur de couleurs.

Utiliser la teinte pour définir la couleur d'arrière-plan

Si vous choisissez une teinte très claire (proche du blanc) ou très sombre (proche du noir), et que cette couleur est proche d'une nuance neutre, GitBook l'utilise comme couleur d'arrière-plan exacte de votre site au lieu de l'arrière-plan blanc ou sombre par défaut. Cela vous permet de donner à votre documentation une légère impression de blanc cassé ou de papier chaud en mode clair, ou un arrière-plan sombre profond spécifique en mode sombre, simplement en choisissant la bonne teinte.

Quelques points à garder à l'esprit :

• La teinte doit être proche du neutre (légèrement colorée seulement). Une teinte fortement colorée conserve l'arrière-plan standard de GitBook et ne teinte que les accents.
• Elle doit être clairement claire ou clairement sombre. Un gris intermédiaire ne changera pas l'arrière-plan.
• Avec le Audacieux thème, la teinte stylise l'en-tête plutôt que l'arrière-plan de la page, donc l'arrière-plan reste tel quel.

Couleurs sémantiques

Les couleurs sémantiques sont appliquées aux blocs d'information dans votre contenu publié, et peuvent également être appliquées aux blocs de code.

Vous pouvez modifier la couleur d'arrière-plan de chaque style d'information ; ces modifications seront répercutées sur le site publié que vous personnalisez.

Remarque : Les blocs d'information dans l'éditeur GitBook resteront toujours dans leurs couleurs standard et ne correspondront pas aux couleurs sémantiques de votre site.

Thème de code

Les thèmes de code modifient l'apparence du code et des blocs API dans votre documentation publiée.

La liste des thèmes comprend :

• Thèmes adaptatifs – Ces thèmes standard pour les modes clair et sombre utilisent la palette de couleurs de votre site pour correspondre à votre marque.
• Shiki thèmes – Choisissez parmi plus de 60 préréglages de thèmes, en modes clair et sombre.

Vous pouvez choisir des thèmes de code distincts pour les modes clair et sombre de votre documentation. Et vous pouvez utiliser n'importe quel schéma de couleurs clair ou sombre dans n'importe quel mode — par ex. un thème de code sombre lorsque votre documentation est en mode clair.

Par défaut, le thème que vous choisissez s'appliquera aux blocs de code et aux blocs OpenAPI. Si vous souhaitez définir un thème différent pour les blocs OpenAPI, cliquez sur le bouton Personnaliser par type de bloc .

Modes

Afficher le sélecteur de mode

Activez cette option si vous souhaitez que les visiteurs basculent manuellement entre le mode clair et le mode sombre. Les lecteurs peuvent trouver le sélecteur en bas de n'importe quelle page publiée, sur ordinateur comme sur mobile.

Mode par défaut

Choisissez si les visiteurs voient votre contenu en mode clair ou sombre par défaut. Si Afficher le sélecteur de mode est activé, ils peuvent changer de mode ; s'il est désactivé, ils ne verront que le mode que vous choisissez ici.

Remarque : pour modifier le thème dans l'application GitBook, allez dans le menu Paramètres en bas de la barre latérale.

Styles du site

Famille de polices

Choisissez une famille de polices standard et monospace pour votre contenu publié parmi une liste sélectionnée d'options populaires.

Police principale

C'est la police qui sera utilisée par défaut sur l'ensemble de votre site. Elle sera toujours utilisée pour le corps du texte et le texte de l'interface sur votre site.

Titres

La police des titres est facultative et ne s'appliquera qu'aux titres Page, H1, H2 et H3 sur votre site. Par défaut, la police des titres est définie pour correspondre à la police principale de votre site.

Monospace

Les polices monospace sont utilisées dans les blocs de code et les blocs OpenAPI sur votre site de documentation.

Polices personnalisées

Importez vos propres polices standard et monospace pour aligner votre contenu publié sur le guide de style de votre marque. Pour importer une police, cliquez sur Ajouter une police personnalisée et suivez les instructions. Vous devez importer un fichier de police pour les graisses régulière et grasse.

GitBook prend actuellement en charge .woff et .woff2. Pour les autres formats, veuillez contacter [e-mail].

Icônes

Lorsque vous utilisez des icônes de page, définissez ici le poids et le style des icônes affichées.

Ce paramètre contrôle le poids et le style des icônes de page sur votre site publié. Il ne définit pas les icônes des groupes de pages ni les icônes intégrées. Définissez les icônes des groupes de pages dans la table des matières de la section. Ajoutez des icônes intégrées dans Contenu en ligne.

Style des coins

Choisissez des coins arrondis ou droits pour correspondre aux préférences de style de votre marque.

Style de profondeur

Choisissez entre deux styles de profondeur, qui s'appliquent aux cartes, aux boutons et à tout autre élément avec une ombre :

• Subtil : Quelques ombres et une certaine élévation.
• Plat : Aucune ombre ni élévation.

Style des liens

Choisissez entre deux conceptions de liens :

• Par défaut : met en valeur le lien entier dans votre couleur principale ou de teinte.
• Accentué : ajoute un soulignement coloré au lien, tout en laissant la couleur du texte inchangée.

Styles de la barre latérale

Ce menu vous donne une idée visuelle de la façon dont les différents styles modifieront l'apparence de votre barre latérale.

Style d'arrière-plan

Choisissez le style d'arrière-plan du conteneur de la barre latérale. La couleur est dérivée du thème que vous avez choisi.

Il existe deux options — Par défaut et Rempli — chacune avec une représentation visuelle de la façon dont elles modifieront votre table des matières.

Style de liste

Choisissez le style de la liste de la barre latérale et des éléments sélectionnés. Il existe trois options — Par défaut, Pastille et Ligne — chacune avec une représentation visuelle montrant comment elles modifieront votre table des matières.