toMedia

主题

配置 Fumadocs UI 的颜色主题和样式

Fumadocs UI 通过 Tailwind CSS 预设提供自定义颜色、动画和工具。

设置

仅支持 Tailwind CSS v4,预设也会包含 Fumadocs UI 自身的源。

中性主题:

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

Shadcn UI 预设:

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

Preflight 更改

使用 Tailwind CSS 插件或预构建样式表会修改默认的边框、文本和背景颜色。

明暗模式

系统通过 next-themes 支持明暗模式,该功能包含在 Root Provider 组件中。

RTL 布局

RTL 功能需要在 body 元素和 root provider 组件中都设置 dir prop 为 rtl

布局宽度

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

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

颜色

可用的预设主题包括:neutral、black、vitepress、dusk、catppuccin、ocean、purple、solar、emerald、ruby 和 aspen。

颜色可通过 CSS/主题变量使用 HSL 颜色值进行自定义,支持明暗模式。

排版

内置插件(从 Tailwind CSS Typography fork)提供 prose 类用于内容样式。注意如果同时使用 @tailwindcss/typography 可能会产生冲突。

On this page