Apparence et identité visuelle

Utilisez ces paramètres de docs.json pour contrôler l’identité visuelle de votre site de documentation : thème de mise en page, couleurs de marque, logo, typographie et arrière-plan.

Paramètres

`theme` - required

Le thème de mise en page de votre site. L’un des suivants : mint, maple, palm, willow, linden, almond, aspen, sequoia, luma. Voir Thèmes pour les aperçus et les détails.

`name` - required

Type : string Le nom de votre projet, organisation ou produit. Apparaît dans le titre de l’onglet du navigateur et à d’autres endroits de votre site.

`colors` - required

Type : object Les couleurs utilisées dans votre documentation. Les couleurs s’affichent différemment selon les thèmes. Si vous ne fournissez qu’une couleur principale, elle s’applique à tous les éléments de couleur.

string

requis

La couleur principale de votre documentation. Généralement utilisée pour la mise en évidence en mode clair, avec quelques variations selon le thème.Doit être un code hexadécimal commençant par #. Exemple : "#0D9373".

string

La couleur utilisée pour la mise en évidence en mode sombre.Doit être un code hexadécimal commençant par #.

string

La couleur utilisée pour les boutons et les états de survol en modes clair et sombre, avec quelques variations selon le thème.Doit être un code hexadécimal commençant par #.

docs.json

"colors": {
  "primary": "#0D9373",
  "light": "#55D799",
  "dark": "#0D9373"
}

`logo`

Type : string ou object Le logo de votre site. Fournissez un chemin d’image unique ou des images distinctes pour les modes clair et sombre.

string

requis

Chemin vers votre fichier de logo pour le mode clair. Incluez l’extension du fichier. Exemple : /logo/light.svg.

string

requis

Chemin vers votre fichier de logo pour le mode sombre. Incluez l’extension du fichier. Exemple : /logo/dark.svg.

string (uri)

L’URL vers laquelle rediriger lors d’un clic sur le logo. Si non fournie, le logo pointe vers la première page de la locale sélectionnée pour les documentations internationalisées, ou vers votre page d’accueil pour les sites monolingues. Accepte une URL absolue, comme https://yoursite.com, ou un chemin relatif commençant par /, comme /quickstart.

docs.json

"logo": {
  "light": "/logo/light.svg",
  "dark": "/logo/dark.svg",
  "href": "https://yoursite.com"
}

`favicon`

Type : string ou object Chemin vers votre fichier de favicon, incluant l’extension du fichier. Redimensionné automatiquement aux tailles de favicon appropriées. Fournissez un fichier unique ou des fichiers distincts pour les modes clair et sombre.

string

requis

Chemin vers votre favicon pour le mode clair. Incluez l’extension du fichier. Exemple : /favicon.png.

string

requis

Chemin vers votre favicon pour le mode sombre. Incluez l’extension du fichier. Exemple : /favicon-dark.png.

docs.json

"favicon": "/favicon.svg"

`appearance`

Type : object Paramètres du mode clair/sombre.

"system" | "light" | "dark"

Mode de couleur par défaut. Choisissez system pour correspondre aux paramètres de l’OS de l’utilisateur, ou light ou dark pour forcer un mode spécifique. Valeur par défaut : system.

boolean

Lorsque true, masque l’interrupteur du mode clair/sombre pour que les utilisateurs ne puissent pas changer de mode. Valeur par défaut : false.

docs.json

"appearance": {
  "default": "dark",
  "strict": true
}

`fonts`

Type : object Polices personnalisées pour votre documentation. La police par défaut varie selon le thème. Prend en charge Google Fonts et les polices auto-hébergées.

string

requis

Nom de la famille de polices, comme "Inter" ou "Open Sans". Prend en charge les noms de familles Google Fonts. Ces polices se chargent automatiquement sans nécessiter de source.

number

Graisse de la police, comme 400 ou 700. Les polices variables prennent en charge les graisses fractionnaires comme 550.

string (uri)

URL vers une police hébergée ou chemin vers un fichier de police local. Non nécessaire pour les Google Fonts.

Hébergée : https://example.com/fonts/MyFont.woff2
Locale : /fonts/MyFont.woff2

"woff" | "woff2"

Format du fichier de police. Requis lors de l’utilisation du champ source.

object

Remplace les paramètres de police uniquement pour les titres.Accepte les mêmes champs family, weight, source et format que l’objet fonts de niveau supérieur.

object

Remplace les paramètres de police uniquement pour le corps du texte.Accepte les mêmes champs family, weight, source et format que l’objet fonts de niveau supérieur.

docs.json

"fonts": {
  "family": "Inter",
  "heading": {
    "family": "Playfair Display"
  }
}

`icons`

Type : object Paramètres de la bibliothèque d’icônes. Vous ne pouvez utiliser qu’une seule bibliothèque d’icônes par projet. Tous les noms d’icônes dans votre documentation doivent provenir de la bibliothèque sélectionnée.

"fontawesome" | "lucide" | "tabler"

requis

Bibliothèque d’icônes à utiliser dans toute votre documentation. Valeur par défaut : fontawesome.

Vous pouvez spécifier une URL vers une icône hébergée en externe ou un chemin vers un fichier d’icône dans votre projet pour n’importe quelle icône individuelle, indépendamment du paramètre de bibliothèque.

docs.json

"icons": {
  "library": "lucide"
}

`background`

Type : object Paramètres d’image d’arrière-plan, de décoration et de couleur.

"gradient" | "grid" | "windows"

Un motif d’arrière-plan décoratif pour votre thème.

object

Couleurs d’arrière-plan personnalisées pour les modes clair et sombre.

Afficher background.color

string

Couleur d’arrière-plan pour le mode clair. Doit être un code hexadécimal commençant par #.

string

Couleur d’arrière-plan pour le mode sombre. Doit être un code hexadécimal commençant par #.

string or object

Image d’arrière-plan pour votre site. Fournissez un chemin unique ou des chemins distincts pour les modes clair et sombre.

Afficher background.image

string

requis

Chemin vers votre image d’arrière-plan pour le mode clair. Exemple : /background.png.

string

requis

Chemin vers votre image d’arrière-plan pour le mode sombre. Exemple : /background-dark.png.

docs.json

"background": {
  "decoration": "gradient",
  "color": {
    "light": "#F8FAFC",
    "dark": "#0F172A"
  }
}

`styling`

Type : object Contrôles de style visuel avancés.

"section" | "breadcrumbs"

Le style de l’eyebrow de la page (le libellé affiché en haut de la page). Choisissez section pour afficher le nom de la section ou breadcrumbs pour afficher le chemin de navigation complet. Valeur par défaut : section.

boolean

Contrôle si les feuilles de style LaTeX se chargent. Par défaut, Mintlify détecte automatiquement l’utilisation de LaTeX dans votre contenu et charge les feuilles de style nécessaires.

Définissez sur true pour forcer le chargement des feuilles de style LaTeX lorsque la détection automatique échoue.
Définissez sur false pour empêcher le chargement des feuilles de style LaTeX et améliorer les performances si vous n’utilisez pas d’expressions mathématiques.

"system" | "dark" | string | object

Thème des blocs de code. Valeur par défaut : "system".

"system" : Correspond au mode actuel du site (clair ou sombre)
"dark" : Utilise toujours le mode sombre
Un nom de thème Shiki sous forme de chaîne : applique ce thème à tous les blocs de code
Un objet avec les clés light et dark : applique des thèmes Shiki distincts par mode

Afficher styling.codeblocks object

string

Un thème Shiki unique pour les deux modes.

"styling": {
  "codeblocks": {
    "theme": "dracula"
  }
}

object

Thèmes Shiki distincts pour les modes clair et sombre.

Afficher theme

string

requis

Nom du thème Shiki pour le mode clair.

string

requis

Nom du thème Shiki pour le mode sombre.

"styling": {
  "codeblocks": {
    "theme": {
      "light": "github-light",
      "dark": "github-dark"
    }
  }
}

object

Configuration personnalisée des langages pour les blocs de code.

Afficher languages

array of string

Chemins vers des fichiers JSON décrivant des langages Shiki personnalisés. Utilisez ceci pour ajouter la coloration syntaxique aux langages qui ne sont pas dans l’ensemble par défaut de Shiki. Chaque fichier doit respecter le format de grammaire TextMate.

"styling": {
  "codeblocks": {
    "languages": {
      "custom": ["/languages/my-language.json"]
    }
  }
}

`thumbnails`

Type : object Personnalisation des vignettes pour les réseaux sociaux et les aperçus de page.

"classic" | "headline" | "minimal"

Mise en page des vignettes. Si non défini, les vignettes utilisent la mise en page par défaut.

classic : logo en haut à gauche, avec le titre et la description en dessous.
headline : titre et description en haut, avec le logo en bas à droite.
minimal : titre et description centrés, avec le logo dans un panneau en bas.

Avec un preset, le surtitre (eyebrow) au-dessus du titre utilise toujours une police à chasse fixe, même si vous définissez thumbnails.fonts.

"light" | "dark"

Thème visuel pour les vignettes. Si non défini, les vignettes utilisent le jeu de couleurs de votre site défini par colors.

"brand" | "neutral"

Style d’arrière-plan des vignettes avec preset. S’applique uniquement lorsque vous définissez thumbnails.preset. Valeur par défaut : brand.

brand : un arrière-plan et un halo teintés avec la teinte de votre couleur principale. Si vous définissez background.color, les vignettes utilisent cette couleur comme arrière-plan.
neutral : la couleur d’arrière-plan de votre site, sans halo.

string

Image d’arrière-plan pour les vignettes. Peut être un chemin relatif ou une URL absolue. Sur les vignettes avec preset, l’image remplace la couleur d’arrière-plan et le halo de thumbnails.surface.

object

Configuration des polices pour les vignettes. Utilise une famille Google Fonts ou un fichier de police auto-hébergé. Si la police ne se charge pas, les vignettes utilisent la police par défaut.

Afficher thumbnails.fonts

string

requis

Nom de la famille de polices, comme "Open Sans" ou "Playfair Display". Prend en charge les noms de familles Google Fonts. Si vous définissez source, il s’agit du nom de votre police auto-hébergée.

string

URL ou chemin vers un fichier de police auto-hébergé, comme /fonts/custom.woff ou https://cdn.example.com/font.woff.

"woff" | "ttf" | "otf"

Format du fichier de police auto-hébergé. Obligatoire lorsque vous définissez source. Les vignettes ne prennent pas en charge woff2.

object

Le surtitre affiché au-dessus du titre de la page dans les vignettes.

Afficher thumbnails.eyebrow

Le niveau de navigation dont le nom apparaît comme surtitre. Valeur par défaut : group. Si une page ne se trouve pas dans un élément de navigation du type choisi, le surtitre affiche le nom du groupe. Utilisez none pour masquer le surtitre.

"plain" | "bar" | "pill"

Rendu du surtitre sur les vignettes avec preset. Valeur par défaut : bar pour classic, pill pour headline et plain pour minimal.

string

Couleur hexadécimale du surtitre sur les vignettes avec preset. Si non défini, Mintlify dérive la couleur des couleurs de votre thème.

docs.json

"thumbnails": {
  "preset": "headline",
  "eyebrow": {
    "source": "tab",
    "style": "bar",
    "color": "#FDE68A"
  }
}

Remplacer les vignettes d’une page ou d’une section

Pour modifier la vignette d’une seule page, ajoutez un objet thumbnail au frontmatter de la page. Pour la modifier pour une section de navigation, ajoutez thumbnail à un groupe, un onglet, une ancre, un menu déroulant, un produit, une version, une langue ou un élément de menu dans docs.json. Un remplacement thumbnail accepte preset, appearance, surface, background et eyebrow. Dans un remplacement, eyebrow est le texte littéral affiché au-dessus du titre, et "" le masque. Définissez background sur "" pour supprimer une image d’arrière-plan héritée. Les options source, style et color du surtitre se définissent uniquement pour tout le site dans thumbnails.eyebrow. Mintlify résout chaque clé séparément. Il utilise d’abord le frontmatter de la page, puis la section de navigation la plus proche qui définit la clé, puis thumbnails dans docs.json. Mintlify ignore les valeurs de remplacement non valides et utilise le niveau suivant.

Page frontmatter

---
title: "Webhooks"
thumbnail:
  preset: minimal
  eyebrow: "API Reference"
---

docs.json

{
  "group": "Webhooks",
  "thumbnail": { "preset": "minimal" },
  "pages": ["guides/webhooks"]
}

Exemple

docs.json

{
  "$schema": "https://mintlify.com/docs.json",
  "theme": "maple",
  "name": "Example Co.",
  "colors": {
    "primary": "#3B82F6",
    "light": "#93C5FD",
    "dark": "#1D4ED8"
  },
  "logo": {
    "light": "/logo/light.svg",
    "dark": "/logo/dark.svg",
    "href": "https://example.com"
  },
  "favicon": "/favicon.svg",
  "appearance": {
    "default": "system"
  },
  "fonts": {
    "family": "Inter"
  },
  "icons": {
    "library": "lucide"
  },
  "background": {
    "decoration": "gradient"
  }
}

Prise en main

Créer du contenu

Gérer votre site

Agent

Assistant

Contenu adapté aux agents

Recherche et SEO

Documenter des API

Intégrations

Référence

Apparence et identité visuelle

Paramètres

`theme` - required

`name` - required

`colors` - required

`logo`

`favicon`

`appearance`

`fonts`

`icons`

`background`

`styling`

`thumbnails`

Remplacer les vignettes d’une page ou d’une section

Exemple

​Paramètres

​theme - required

​name - required

​colors - required

​logo

​favicon

​appearance

​fonts

​icons

​background

​styling

​thumbnails

​Remplacer les vignettes d’une page ou d’une section

​Exemple

Paramètres

`theme` - required

`name` - required

`colors` - required

`logo`

`favicon`

`appearance`

`fonts`

`icons`

`background`

`styling`

`thumbnails`

Remplacer les vignettes d’une page ou d’une section

Exemple