Thèmes

Utilisation

Notez que seul Tailwind CSS v4 est pris en charge :

@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

/* path of `fumadocs-ui` relative to the CSS file */
@source '../node_modules/fumadocs-ui/dist/**/*.js';

Modifications du vol en amont

En utilisant le plugin Tailwind CSS ou la feuille de style prédéfinie, votre bordure, votre texte et votre arrière-plan par défaut les couleurs seront modifiées.

Modes clair/sombre

Fumadocs prend en charge les modes clair/sombre avec next-themes, il est inclus dans le fournisseur racine.

Voir Root Provider pour en savoir plus.

Disposition ### RTL

La disposition RTL (de droite à gauche) est prise en charge.

Pour activer RTL, définissez la prop dir sur rtl dans le corps et le fournisseur racine (obligatoire pour l'interface utilisateur Radix).

import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body dir="rtl">
        <RootProvider dir="rtl">{children}</RootProvider>
      </body>
    </html>
  );
}

Préfixe

L'interface utilisateur de Fumadocs a ses propres couleurs, animations et utilitaires. Par défaut, il ajoute un préfixe fd- pour éviter les conflits avec l'interface utilisateur Shadcn ou vos propres variables CSS.

Vous pouvez les utiliser sans le préfixe en ajoutant quelques alias :

@theme {
  --color-primary: var(--color-fd-primary);
}

Llargeur de mise en page

Personnalisez la largeur maximale de la mise en page des documents avec des variables CSS.

:root {
  --fd-layout-width: 1400px;
}

Préréglage CSS ## Tailwind

Le préréglage CSS Tailwind introduit de nouvelles couleurs et des utilitaires supplémentaires, notamment fd-steps.

Lèmes

Il est livré avec de nombreux thèmes prêts à l'emploi, vous pouvez en choisir un que vous préférez.

@import 'fumadocs-ui/css/<theme>.css';

/* Example */
@import 'fumadocs-ui/css/black.css';

neutralblackvitepressduskcatppuccinoceanpurple

Couleurs

Le système de conception a été inspiré par Shadcn UI, vous pouvez facilement personnaliser les couleurs à l'aide de variables CSS.

:root {
  --color-fd-background: hsl(0, 0%, 100%);
}

.dark {
  --color-fd-background: hsl(0, 0%, 0%);
}

Typographie

Nous avons un plugin intégré dérivé de Tailwind CSS Typography.

Le plugin ajoute une classe prose et des variantes pour la personnaliser.

<div className="prose">
  <h1>Good Heading</h1>
</div>