テーマ

概要

Fumadocs UI は、Tailwind CSS のプリセットによって独自のカラー、アニメーション、ユーティリティを追加します。

セットアップ

サポートされているのは Tailwind CSS v4 のみです。プリセットには Fumadocs UI 自体のソースも含まれます:

Tailwind CSS

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

Shadcn UI を使用している場合は、代わりに shadcn プリセットを使用できます。Fumadocs UI は Shadcn UI のテーマの色をそのまま使用します。

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

詳しくはカラーを参照してください。

Preflight の変更

Tailwind CSS プラグインまたはビルド済みのスタイルシートを使用すると、ボーダー、テキスト、背景のデフォルトの色が変更されます。

ライト/ダークモード

Fumadocs は next-themes を使用してライト/ダークモードをサポートしています。next-themes は Root Provider に含まれています。

詳しくは Root Provider を参照してください。

RTL レイアウト

RTL (右から左) レイアウトに対応しています。

RTL を有効にするには、body 要素とルートプロバイダーの dir prop を rtl に設定してください。

import { RootProvider } from 'fumadocs-ui/provider/<framework>';
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>
  );
}

レイアウトの幅

CSS 変数を使って、Docs レイアウトの最大幅をカスタマイズできます。

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

カラー

多数のプリセットが標準で用意されているので、お好みのものを選んで使用できます。

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

Neutral

このデザインシステムは Shadcn UI をベースにしています。CSS/テーマ変数で色をカスタマイズすることもできます。

global.css

@theme {
  --color-fd-background: hsl(0, 0%, 96%);
  --color-fd-foreground: hsl(0, 0%, 3.9%);
  --color-fd-muted: hsl(0, 0%, 96.1%);
  --color-fd-muted-foreground: hsl(0, 0%, 45.1%);
  --color-fd-popover: hsl(0, 0%, 98%);
  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
  --color-fd-card: hsl(0, 0%, 94.7%);
  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
  --color-fd-border: hsla(0, 0%, 80%, 50%);
  --color-fd-primary: hsl(0, 0%, 9%);
  --color-fd-primary-foreground: hsl(0, 0%, 98%);
  --color-fd-secondary: hsl(0, 0%, 93.1%);
  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
  --color-fd-accent: hsla(0, 0%, 82%, 50%);
  --color-fd-accent-foreground: hsl(0, 0%, 9%);
  --color-fd-ring: hsl(0, 0%, 63.9%);
}

.dark {
  --color-fd-background: hsl(0, 0%, 7.04%);
  --color-fd-foreground: hsl(0, 0%, 92%);
  --color-fd-muted: hsl(0, 0%, 12.9%);
  --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
  --color-fd-popover: hsl(0, 0%, 11.6%);
  --color-fd-popover-foreground: hsl(0, 0%, 86.9%);
  --color-fd-card: hsl(0, 0%, 9.8%);
  --color-fd-card-foreground: hsl(0, 0%, 98%);
  --color-fd-border: hsla(0, 0%, 40%, 20%);
  --color-fd-primary: hsl(0, 0%, 98%);
  --color-fd-primary-foreground: hsl(0, 0%, 9%);
  --color-fd-secondary: hsl(0, 0%, 12.9%);
  --color-fd-secondary-foreground: hsl(0, 0%, 92%);
  --color-fd-accent: hsla(0, 0%, 40.9%, 30%);
  --color-fd-accent-foreground: hsl(0, 0%, 90%);
  --color-fd-ring: hsl(0, 0%, 54.9%);
}

タイポグラフィ

Tailwind CSS Typography をフォークした組み込みプラグインを提供しています。

このプラグインは prose クラスと、それをカスタマイズするためのバリアントを追加します。

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

prose と併せて prose-sm または prose-xs を使用すると、text-sm または text-xs と同じフォントサイズと行の高さが適用され、フォントウェイトも見た目に合わせて調整されます：

<div className="prose prose-sm">...</div>

このプラグインは Fumadocs UI の MDX コンポーネントと組み合わせて使うことを前提としているため、@tailwindcss/typography と競合する場合があります。

デフォルトのプラグインではなく @tailwindcss/typography を使う必要がある場合は、競合を避けるために className オプションを設定してください。

@import 'tailwindcss';
@plugin "@tailwindcss/typography" {
  className: wysiwyg;
}

概要アンカーリンクをコピー

セットアップアンカーリンクをコピー

Preflight の変更アンカーリンクをコピー

ライト/ダークモードアンカーリンクをコピー

RTL レイアウトアンカーリンクをコピー

レイアウトの幅アンカーリンクをコピー

カラーアンカーリンクをコピー

タイポグラフィアンカーリンクをコピー

このページの内容