LogoPDFuck
LogoPDFuck
主题
2025/01/15

主题

为 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
支持明/暗模式,它包含在 Root Provider 中。

参见 Root Provider 了解更多信息。

RTL 布局

支持 RTL(从右到左)布局。

要启用 RTL,请在 body 和 root provider(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 有自己的颜色、动画和工具。 默认情况下,它添加了

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';

Neutral

Black

Vitepress

Dusk

Catppuccin

Ocean

Purple

颜色

设计系统的灵感来自 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
而不是默认插件,请设置类名选项以避免冲突。

全部文章

作者

avatar for Mkdirs模板
Mkdirs模板

分类

  • 新闻
  • 产品
使用方法预设更改明/暗模式RTL 布局前缀布局宽度Tailwind CSS 预设主题颜色排版

更多文章

测试专用付费文章
产品

测试专用付费文章

这是一篇测试专用付费文章。

avatar for Fox
Fox
2025/08/30
手动安装
公司产品

手动安装

从零开始创建一个新的 Fumadocs 项目

avatar for Mkdirs模板
Mkdirs模板
2025/03/14
国际化
公司产品

国际化

在您的文档中支持多种语言

avatar for MkSaaS模板
MkSaaS模板
2025/03/15
LogoPDFuck

免费浏览器端 PDF 工具 - 100% 私密安全

整理
  • 合并PDF
  • 分割PDF
  • 旋转PDF
  • 页面重排
  • 提取页面
  • 删除页面
  • 反转PDF
  • 复制页面
转换
  • PDF转PNG + 长图
  • PDF转JPG + 长图
  • PDF转WebP + 长图
  • PNG转PDF
  • JPG转PDF
  • WebP转PDF
  • PDF转文本
  • BMP转PDF
  • GIF转PDF
  • SVG转PDF
  • PDF转Word
  • PDF转Excel
  • PDF转PPTX
  • Word转PDF
  • Excel转PDF
  • PPTX转PDF
编辑
  • 压缩PDF
  • 添加水印
  • 添加页码
  • 编辑元数据
  • 裁剪PDF
  • 扁平化PDF
  • 页眉页脚
  • 调整页面大小
安全
  • 签名PDF
  • 解锁PDF
  • 保护PDF
  • 比较PDF
  • 编校PDF
  • PDF OCR识别
  • 清理PDF
  • 验证PDF
© 2026 PDFuck All Rights Reserved.