Tiramisu Docs

Configuration

Thème

Personnalisez le logo, la navigation, le mode sombre, l'intégration GitHub et les styles CSS de votre site.

Thème et apparence

Tiramisu Docs utilise un thème personnalisable basé sur Tailwind CSS et shadcn-svelte. Vous pouvez ajuster les couleurs, l'image de marque et l'apparence via votre fichier de configuration.

Définissez votre logo sous forme de chaîne (identique pour les modes clair et sombre) ou sous forme d'objet avec des variantes distinctes :

typescript 
// Single logo
logo: "/logo.svg",

// Light and dark variants
logo: {
  light: "/logo.svg",
  dark: "/logo-dark.svg",
},

Le logo apparaît en haut à gauche de la barre latérale (ou de la barre supérieure lorsque les sections sont activées).

Liens de navigation

Ajoutez des liens à la barre de navigation supérieure :

typescript 
nav: [
  { label: "Docs", href: "/docs" },
  { label: "Blog", href: "/blog" },
],

Intégration GitHub

Configurez GitHub pour activer les liens « Modifier sur GitHub » sur les pages de documentation :

typescript 
github: {
  repo: "user/repo",
  branch: "main",
  dir: "src/docs",
},

Le champ dir spécifie l'emplacement de votre documentation par rapport à la racine du dépôt.

Serveur MCP

Définissez une URL pour le serveur MCP intégré :

typescript 
mcp: "https://mcp.example.com",

Consultez la page Serveur MCP pour plus de détails sur la configuration de la navigation de documentation assistée par IA.

Mode sombre

Le mode sombre est intégré et fonctionne automatiquement. Les utilisateurs peuvent basculer entre les thèmes clair et sombre à l'aide du sélecteur de thème dans la barre latérale ou la barre supérieure. La préférence de thème est enregistrée dans le stockage local.

Personnalisation CSS

Importez le thème Tiramisu dans votre fichier src/app.css :

css 
@import "@tiramisu-docs/kit/theme.css";

Vous pouvez surcharger les propriétés CSS personnalisées ou ajouter vos propres classes Tailwind pour personnaliser davantage l'apparence.