> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-docs-automation-github-pr-review.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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` - <Badge color="red">required</Badge>

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](/fr/customize/themes) pour les aperçus et les détails.

***

### `name` - <Badge color="red">required</Badge>

**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` - <Badge color="red">required</Badge>

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

<ResponseField name="colors.primary" type="string" required>
  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"`.
</ResponseField>

<ResponseField name="colors.light" type="string">
  La couleur utilisée pour la mise en évidence en mode sombre.

  Doit être un code hexadécimal commençant par `#`.
</ResponseField>

<ResponseField name="colors.dark" type="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 `#`.
</ResponseField>

```json docs.json theme={null}
"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.

<ResponseField name="logo.light" type="string" required>
  Chemin vers votre fichier de logo pour le mode clair. Incluez l'extension du fichier. Exemple : `/logo/light.svg`.
</ResponseField>

<ResponseField name="logo.dark" type="string" required>
  Chemin vers votre fichier de logo pour le mode sombre. Incluez l'extension du fichier. Exemple : `/logo/dark.svg`.
</ResponseField>

<ResponseField name="logo.href" type="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](/fr/guides/internationalization), ou vers votre page d'accueil pour les sites monolingues. Exemple : `https://yoursite.com`.
</ResponseField>

```json docs.json theme={null}
"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.

<ResponseField name="favicon.light" type="string" required>
  Chemin vers votre favicon pour le mode clair. Incluez l'extension du fichier. Exemple : `/favicon.png`.
</ResponseField>

<ResponseField name="favicon.dark" type="string" required>
  Chemin vers votre favicon pour le mode sombre. Incluez l'extension du fichier. Exemple : `/favicon-dark.png`.
</ResponseField>

```json docs.json theme={null}
"favicon": "/favicon.svg"
```

***

### `appearance`

**Type :** `object`

Paramètres du mode clair/sombre.

<ResponseField name="appearance.default" type="&#x22;system&#x22; | &#x22;light&#x22; | &#x22;dark&#x22;">
  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`.
</ResponseField>

<ResponseField name="appearance.strict" type="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`.
</ResponseField>

```json docs.json theme={null}
"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](https://fonts.google.com) et les polices auto-hébergées.

<ResponseField name="fonts.family" type="string" required>
  Nom de la famille de polices, comme `"Inter"` ou `"Open Sans"`. Prend en charge les noms de familles [Google Fonts](https://fonts.google.com) : ces polices se chargent automatiquement sans `source` requis.
</ResponseField>

<ResponseField name="fonts.weight" type="number">
  Graisse de la police, comme `400` ou `700`. Les polices variables prennent en charge les graisses fractionnaires comme `550`.
</ResponseField>

<ResponseField name="fonts.source" type="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`
</ResponseField>

<ResponseField name="fonts.format" type="&#x22;woff&#x22; | &#x22;woff2&#x22;">
  Format du fichier de police. Requis lors de l'utilisation du champ `source`.
</ResponseField>

<ResponseField name="fonts.heading" type="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.
</ResponseField>

<ResponseField name="fonts.body" type="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.
</ResponseField>

```json docs.json theme={null}
"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.

<ResponseField name="icons.library" type="&#x22;fontawesome&#x22; | &#x22;lucide&#x22; | &#x22;tabler&#x22;" required>
  Bibliothèque d'icônes à utiliser dans toute votre documentation. Valeur par défaut : `fontawesome`.

  <Note>
    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.
  </Note>
</ResponseField>

```json docs.json theme={null}
"icons": {
  "library": "lucide"
}
```

***

### `background`

**Type :** `object`

Paramètres d'image d'arrière-plan, de décoration et de couleur.

<ResponseField name="background.decoration" type="&#x22;gradient&#x22; | &#x22;grid&#x22; | &#x22;windows&#x22;">
  Un motif d'arrière-plan décoratif pour votre thème.
</ResponseField>

<ResponseField name="background.color" type="object">
  Couleurs d'arrière-plan personnalisées pour les modes clair et sombre.

  <Expandable title="background.color">
    <ResponseField name="light" type="string">
      Couleur d'arrière-plan pour le mode clair. Doit être un code hexadécimal commençant par `#`.
    </ResponseField>

    <ResponseField name="dark" type="string">
      Couleur d'arrière-plan pour le mode sombre. Doit être un code hexadécimal commençant par `#`.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="background.image" type="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.

  <Expandable title="background.image">
    <ResponseField name="light" type="string" required>
      Chemin vers votre image d'arrière-plan pour le mode clair. Exemple : `/background.png`.
    </ResponseField>

    <ResponseField name="dark" type="string" required>
      Chemin vers votre image d'arrière-plan pour le mode sombre. Exemple : `/background-dark.png`.
    </ResponseField>
  </Expandable>
</ResponseField>

```json docs.json theme={null}
"background": {
  "decoration": "gradient",
  "color": {
    "light": "#F8FAFC",
    "dark": "#0F172A"
  }
}
```

***

### `styling`

**Type :** `object`

Contrôles de style visuel avancés.

<ResponseField name="styling.eyebrows" type="&#x22;section&#x22; | &#x22;breadcrumbs&#x22;">
  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`.
</ResponseField>

<ResponseField name="styling.latex" type="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.
</ResponseField>

<ResponseField name="styling.codeblocks" type="&#x22;system&#x22; | &#x22;dark&#x22; | 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](https://shiki.style/themes) 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

  <Expandable title="styling.codeblocks object">
    <ResponseField name="theme" type="string">
      Un thème Shiki unique pour les deux modes.

      ```json theme={null}
      "styling": {
        "codeblocks": {
          "theme": "dracula"
        }
      }
      ```
    </ResponseField>

    <ResponseField name="theme" type="object">
      Thèmes Shiki distincts pour les modes clair et sombre.

      <Expandable title="theme">
        <ResponseField name="light" type="string" required>
          Nom du thème Shiki pour le mode clair.
        </ResponseField>

        <ResponseField name="dark" type="string" required>
          Nom du thème Shiki pour le mode sombre.
        </ResponseField>
      </Expandable>

      ```json theme={null}
      "styling": {
        "codeblocks": {
          "theme": {
            "light": "github-light",
            "dark": "github-dark"
          }
        }
      }
      ```
    </ResponseField>

    <ResponseField name="languages" type="object">
      Configuration personnalisée des langages pour les blocs de code.

      <Expandable title="languages">
        <ResponseField name="custom" type="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](https://macromates.com/manual/en/language_grammars).

          ```json theme={null}
          "styling": {
            "codeblocks": {
              "languages": {
                "custom": ["/languages/my-language.json"]
              }
            }
          }
          ```
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

***

### `thumbnails`

**Type :** `object`

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

<ResponseField name="thumbnails.appearance" type="&#x22;light&#x22; | &#x22;dark&#x22;">
  Thème visuel pour les vignettes. Si non défini, les vignettes utilisent le jeu de couleurs de votre site défini par `colors`.
</ResponseField>

<ResponseField name="thumbnails.background" type="string">
  Image d'arrière-plan pour les vignettes. Peut être un chemin relatif ou une URL absolue.
</ResponseField>

<ResponseField name="thumbnails.fonts" type="object">
  Configuration des polices pour les vignettes. Prend uniquement en charge les noms de familles Google Fonts.

  <Expandable title="thumbnails.fonts">
    <ResponseField name="family" type="string" required>
      Nom de la famille de polices, comme `"Open Sans"` ou `"Playfair Display"`. Prend en charge les noms de familles [Google Fonts](https://fonts.google.com).
    </ResponseField>
  </Expandable>
</ResponseField>

## Exemple

```json docs.json theme={null}
{
  "$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"
  }
}
```