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

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

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.

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

string

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

object

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

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.

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

Organiser

Personnaliser

Créer du contenu

Documenter des API

Déployer

Optimisation

Apparence et identité visuelle

Paramètres

`theme` - required

`name` - required

`colors` - required

`logo`

`favicon`

`appearance`

`fonts`

`icons`

`background`

`styling`

`thumbnails`

Exemple

​Paramètres

​theme - required

​name - required

​colors - required

​logo

​favicon

​appearance

​fonts

​icons

​background

​styling

​thumbnails

​Exemple

Paramètres

`theme` - required

`name` - required

`colors` - required

`logo`

`favicon`

`appearance`

`fonts`

`icons`

`background`

`styling`

`thumbnails`

Exemple