AI マジック 3Docsテーマ
Fumadocs UI にテーマを追加する
使用状況
Tailwind CSS v4 のみがサポートされていることに注意してください。
@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';プリフライトの変更点
Tailwind CSS プラグインまたは事前に構築されたスタイルシートを使用すると、デフォルトの境界線、テキスト、背景が決まります。 色が変更されます。
ライト/ダーク モード
Fumadocs は next-themes でライト/ダーク モードをサポートしており、ルート プロバイダーに含まれています。
詳細については、ルートプロバイダー]を参照してください。
RTL レイアウト
RTL (右から左) レイアウトがサポートされています。
RTL を有効にするには、本体およびルート プロバイダー (Radix UI に必要) で dir プロパティを rtl に設定します。
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>
);
}プレフィックス
Fumadocs UI には独自の色、アニメーション、ユーティリティがあります。
デフォルトでは、Shadcn UI または独自の CSS 変数との競合を避けるために、fd- プレフィックスが追加されます。
いくつかのエイリアスを追加することで、接頭辞なしでそれらを使用できます。
@theme {
--color-primary: var(--color-fd-primary);
}レスポンシブ デザインの CSS メディア クエリと併用できます。
レイアウト幅
CSS 変数を使用してドキュメント レイアウトの最大幅をカスタマイズします。
:root {
--fd-layout-width: 1400px;
}Tailwind CSS プリセット
Tailwind CSS プリセットには、新しい色と fd-steps などの追加ユーティリティが導入されています。
テーマ
すぐに使える多くのテーマが付属しており、好みのテーマを選択できます。
@import 'fumadocs-ui/css/<theme>.css';
/* Example */
@import 'fumadocs-ui/css/black.css';
色
デザイン システムは Shadcn UI からインスピレーションを得ており、CSS 変数を使用して色を簡単にカスタマイズできます。
:root {
--color-fd-background: hsl(0, 0%, 100%);
}
.dark {
--color-fd-background: hsl(0, 0%, 0%);
}Tタイポグラフィ
Tailwind CSS Typography からフォークされた組み込みプラグインがあります。
このプラグインは、prose クラスとバリアントを追加してカスタマイズします。
<div className="prose">
<h1>Good Heading</h1>
</div>プラグインは Fumadocs UI の MDX コンポーネントでのみ動作し、@tailwindcss/typography と競合する可能性があります。
デフォルトのプラグインではなく @tailwindcss/typography を使用する必要がある場合は、競合を避けるために クラス名オプションを設定 してください。