AI 매직 3DDocs테마
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를 통해 밝은/어두운 모드를 지원하며 이는 루트 공급자에 포함되어 있습니다.
자세한 내용은 루트 공급자]를 참조하세요.
RTL 레이아웃
RTL(오른쪽에서 왼쪽) 레이아웃이 지원됩니다.
RTL을 활성화하려면 본문 및 루트 공급자(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에는 고유한 색상, 애니메이션 및 유틸리티가 있습니다.
기본적으로 Shadcn UI 또는 자체 CSS 변수와의 충돌을 피하기 위해 fd- 접두사를 추가합니다.
별칭을 추가하면 접두사 없이 사용할 수 있습니다.
@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를 사용해야 하는 경우 충돌을 방지하려면 클래스 이름 옵션을 설정하세요.