AI Magic 3D文档主题
将主题添加到 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';P飞行变更
通过使用 Tailwind CSS 插件或预构建的样式表，您的默认边框、文本和背景 颜色将会改变。
亮/暗模式
Fumadocs 通过 next-themes 支持亮/暗模式，它包含在 Root Provider 中。
请参阅根提供商 了解更多信息。
RTL 布局
支持 RTL（从右到左）布局。
要启用 RTL，请在主体和根提供程序中将 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>
);
}前缀
Fumadocs UI 有自己的颜色、动画和实用程序。
默认情况下，它添加 fd- 前缀以避免与 Shadcn UI 或您自己的 CSS 变量发生冲突。
您可以通过添加一些别名来使用它们而无需前缀：
@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%);
}版式
我们有一个从 Tailwind CSS Typography 分叉的内置插件。
该插件添加了 prose 类和变体来自定义它。
<div className="prose">
<h1>Good Heading</h1>
</div>该插件仅适用于 Fumadocs UI 的 MDX 组件，可能与 @tailwindcss/typography 冲突。
如果您需要在默认插件上使用 @tailwindcss/typography，请设置类名选项 以避免冲突。