Skip to content
Lumen Docs

Configuration

Lumen offre de nombreuses options de configuration pour adapter votre documentation à vos besoins. Toutes les options se trouvent dans le fichier astro.config.mjs, sous la clé starlight().

Titre et description

Section titled “Titre et description”

Commencez par définir l’identité de votre site :

starlight({
  title: 'Documentation MyProject',
  description: "Tout ce qu'il faut savoir pour utiliser MyProject.",
});

Le titre apparaît dans l’en-tête de chaque page et dans l’onglet du navigateur. La description est utilisée pour le référencement (SEO).

Section titled “Logo”

Remplacez le titre textuel par un logo personnalisé :

starlight({
  logo: {
    src: './src/assets/logo.svg',
    alt: 'Logo MyProject',
  },
});

Placez votre fichier dans src/assets/ et référencez-le avec un chemin relatif.

Barre latérale

Section titled “Barre latérale”

Organisez votre documentation avec une barre latérale personnalisée :

starlight({
  sidebar: [
    {
      label: 'Guides',
      items: [
        { label: 'Démarrage rapide', slug: 'docs/guides/getting-started' },
        { label: 'Installation', slug: 'docs/guides/installation' },
        { label: 'Configuration', slug: 'docs/guides/configuration' },
      ],
    },
    {
      label: 'Référence',
      items: [
        { label: 'API', slug: 'docs/reference/api' },
        { label: 'Options', slug: 'docs/reference/configuration-options' },
        { label: 'CLI', slug: 'docs/reference/cli' },
      ],
    },
  ],
});

Chaque entrée possède un label (le texte affiché) et un slug (le chemin du fichier correspondant dans src/content/docs/). La section Référence peut aussi être autogénérée avec autogenerate: { directory: 'docs/reference' }.

Thème et couleurs

Section titled “Thème et couleurs”

Personnalisez les couleurs via les propriétés CSS personnalisées dans votre feuille de style globale :

src/styles/global.css
:root {
  --sl-color-accent-low: #1a2e05;
  --sl-color-accent: #4c8f1a;
  --sl-color-accent-high: #b8e986;
}


:root[data-theme='dark'] {
  --sl-color-accent-low: #0d1f00;
  --sl-color-accent: #5ea82a;
  --sl-color-accent-high: #d4f5a8;
}

Stylisez les couleurs d’accentuation pour chaque thème (clair et sombre).

Pied de page

Section titled “Pied de page”

Ajoutez des informations de copyright et des liens dans le pied de page :

starlight({
  credits: true, // Affiche "Built with Starlight"
  footer: {
    message: '© 2026 MyProject. Tous droits réservés.',
  },
});

Mode sombre

Section titled “Mode sombre”

Par défaut, Lumen propose un sélecteur de thème (clair, sombre, automatique). Vous pouvez forcer un thème ou désactiver le sélecteur :

starlight({
  defaultTheme: 'dark', // 'light', 'dark', ou 'auto'
});

Table des matières

Section titled “Table des matières”

Ajustez le comportement de la table des matières affichée à droite de chaque page :

starlight({
  tableOfContents: {
    minHeadingLevel: 2,
    maxHeadingLevel: 4,
  },
});

Cette configuration affiche les titres de niveau h2 à h4 dans la table des matières. Par défaut, les niveaux 2 et 3 sont inclus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.