Apparence et identité visuelle

Configurez le thème, les couleurs, le logo, le favicon, les polices et l'arrière-plan dans docs.json pour votre site de documentation.

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.

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.

colors.primarystringrequired

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

colors.lightstring

La couleur utilisée pour la mise en évidence en mode sombre.

Doit être un code hexadécimal commençant par #.

colors.darkstring

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.

logo.lightstringrequired

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

logo.darkstringrequired

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

logo.hrefstring (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. Exemple : https://yoursite.com.

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.

favicon.lightstringrequired

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

favicon.darkstringrequired

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.

appearance.default"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.

appearance.strictboolean

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.

fonts.familystringrequired

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 source requis.

fonts.weightnumber

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

fonts.sourcestring (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

fonts.format"woff" | "woff2"

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

fonts.headingobject

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.

fonts.bodyobject

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.

icons.library"fontawesome" | "lucide" | "tabler"required

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.

background.decoration"gradient" | "grid" | "windows"

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

background.colorobject

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

Show background.color

lightstring

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

darkstring

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

background.imagestring or object

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

Show background.image

lightstringrequired

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

darkstringrequired

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.

styling.eyebrows"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.

styling.latexboolean

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.

styling.codeblocks"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

Show styling.codeblocks object

themestring

Un thème Shiki unique pour les deux modes.

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

themeobject

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

Show theme

lightstringrequired

Nom du thème Shiki pour le mode clair.

darkstringrequired

Nom du thème Shiki pour le mode sombre.

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

languagesobject

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

Show languages

customarray 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.

thumbnails.appearance"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.

thumbnails.backgroundstring

Image d’arrière-plan pour les vignettes. Peut être un chemin relatif ou une URL absolue.

thumbnails.fontsobject

Configuration des polices pour les vignettes. Prend uniquement en charge les noms de familles Google Fonts.

Show thumbnails.fonts

familystringrequired

Nom de la famille de polices, comme "Open Sans" ou "Playfair Display". Prend en charge les noms de familles Google Fonts.

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

Apparence et identité visuelle

Paramètres

`theme` - required

`name` - required

`colors` - required

`logo`

`favicon`

`appearance`

`fonts`

`icons`

`background`

`styling`

`thumbnails`

Exemple

On this page