主题 | Fumadocs 中文文档

概述

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 预设代替。它使用您 Shadcn UI 主题中的颜色。

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

Preflight 更改

通过使用 Tailwind CSS 插件或预构建的样式表，您的默认边框、文本和背景颜色将被更改。

浅色/深色模式

Fumadocs 支持浅色/深色模式，使用 next-themes，它包含在根提供器中。

请参阅根提供器以了解更多信息。

RTL 布局

支持 RTL（从右到左）布局。

要启用 RTL，请将 body 和根提供器中的 dir 属性设置为 rtl（Radix UI 必需）。

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>
  );
}

布局宽度

使用 CSS 变量自定义文档布局的最大宽度。

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

颜色

它开箱即用提供许多主题，您可以选择您喜欢的主题。

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

Neutral

Black

Vitepress

Dusk

Catppuccin

Ocean

Purple

Solar

设计系统受 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>

该插件仅与 Fumadocs UI 的 MDX 组件一起工作，它可能与 @tailwindcss/typography 冲突。如果您需要使用 @tailwindcss/typography 代替默认插件，请设置类名选项以避免冲突。

主题

On this page