Customize Theme
Learn how to customize the Fumadocs theme colors and appearance
Learn how to customize the appearance of your Plainform documentation using Fumadocs theming.
Goal
By the end of this recipe, you'll have customized the documentation theme colors and layout to match your brand.
Prerequisites
- A working Plainform installation
- Basic knowledge of CSS and Tailwind
Steps
Customize Theme Colors
Edit the CSS variables in globals.css:
@layer base {
:root {
/* Documentation-specific colors */
--fd-background: 0 0% 100%;
--fd-foreground: 240 10% 3.9%;
--fd-primary: 142.1 76.2% 36.3%;
/* ... other colors */
}
.dark {
/* Dark mode colors */
--fd-background: 20 14.3% 4.1%;
--fd-foreground: 0 0% 95%;
/* ... other colors */
}
}Use HSL color format for easier adjustments. See Fumadocs theming docs for all available variables.
Customize Layout Options
Configure the docs layout in app/docs/layout.tsx:
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { source } from '@/lib/source';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<DocsLayout
tree={source.pageTree}
nav={{
title: 'Your Docs',
transparentMode: 'top',
}}
sidebar={{
defaultOpenLevel: 1,
}}
>
{children}
</DocsLayout>
);
}See Fumadocs layout docs for all configuration options.
Preview and Publish
Start your dev server:
npm run devThen commit and push:
git add .
git commit -m "style: customize documentation theme"
git push origin mainCommon Issues
Colors Not Applying
- Verify CSS variables are defined in
globals.css - Check that variable names start with
--fd-prefix
Theme Switcher Not Working
- Confirm
theme.enabledistrueinFumadocsProvider - Verify dark mode classes are defined in
globals.css
Next Steps
- Add Doc Page - Create new documentation pages
- Create Doc Section - Organize documentation
Related Documentation
- Fumadocs Theming - Complete theming guide
- Fumadocs Layout - Layout configuration
- UI Theming Guide - Plainform UI theming
How is this guide ?
Last updated on