Themen

Verwendung

Beachten Sie, dass nur Tailwind CSS v4 unterstützt wird:

@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';

Preflight-Änderungen

Durch die Verwendung des Tailwind-CSS-Plugins oder des vorgefertigten Stylesheets können Sie Ihren Standardrahmen, -text und -hintergrund festlegen Farben werden geändert.

LHell-/Dunkel-Modi

Fumadocs unterstützt Hell/Dunkel-Modi mit next-themes, es ist im Root Provider enthalten.

Weitere Informationen finden Sie unter Root Provider.

RTL-Layout

Das RTL-Layout (von rechts nach links) wird unterstützt.

Um RTL zu aktivieren, setzen Sie die dir-Requisite im Body- und Root-Provider auf rtl (erforderlich für die Radix-Benutzeroberfläche).

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äfix

Die Benutzeroberfläche von Fumadocs verfügt über eigene Farben, Animationen und Dienstprogramme. Standardmäßig wird ein fd--Präfix hinzugefügt, um Konflikte mit der Shadcn-Benutzeroberfläche oder Ihren eigenen CSS-Variablen zu vermeiden.

Sie können sie ohne das Präfix verwenden, indem Sie einige Aliase hinzufügen:

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

Layoutbreite

Passen Sie die maximale Breite des Dokumentlayouts mit CSS-Variablen an.

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

Tailwind CSS-Voreinstellung

Die Tailwind-CSS-Voreinstellung führt neue Farben und zusätzliche Dienstprogramme ein, darunter fd-steps.

Themen

Viele Themes sind sofort einsatzbereit, Sie können eines auswählen, das Ihnen am besten gefällt.

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

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

neutralblackvitepressduskcatppuccinoceanpurple

Farben

Das Designsystem wurde von der Shadcn-Benutzeroberfläche inspiriert. Sie können die Farben einfach mithilfe von CSS-Variablen anpassen.

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

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

Typografie

Wir haben ein integriertes Plugin, das von Tailwind CSS Typography abgeleitet ist.

Das Plugin fügt eine prose-Klasse und Varianten hinzu, um sie anzupassen.

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