主题
配置 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 可能会产生冲突。