Plainform

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:

components/styles/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:

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 dev

Then commit and push:

git add .
git commit -m "style: customize documentation theme"
git push origin main

Common 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.enabled is true in FumadocsProvider
Verify dark mode classes are defined in globals.css

Next Steps

Add Doc Page - Create new documentation pages
Create Doc Section - Organize documentation

Fumadocs Theming - Complete theming guide
Fumadocs Layout - Layout configuration
UI Theming Guide - Plainform UI theming

Customize Theme

On this page