Home /

docs

Themes

@farming-labs/docs ships with nine built-in theme entrypoints. Each is a preset factory function that you pass to defineDocs(). hardline stays as the original hard-edge preset, and concrete is the second, louder brutalist variant.

Create your own theme

Want to build a custom theme or publish one as a package? See Creating your own theme for the full guide.

Built-in Themes

ThemeImportDescription
Default@farming-labs/themeNeutral colors, standard radius
Colorful@farming-labs/theme/colorfulWarm amber accent, Inter typography
Darksharp@farming-labs/theme/darksharpAll-black, sharp corners
Pixel Border@farming-labs/theme/pixel-borderInspired by better-auth.com
Shiny@farming-labs/theme/shinyClerk-inspired, purple accents
DarkBold@farming-labs/theme/darkboldPure monochrome, Geist typography
GreenTree@farming-labs/theme/greentreeMintlify-inspired, emerald green accent
Concrete@farming-labs/theme/concreteBrutalist poster-style hard-edge theme
Hardline@farming-labs/theme/hardlineOriginal hard-edge theme with strong borders

Using a Theme

docs.config.ts
import { defineDocs } from "@farming-labs/docs";
import { pixelBorder } from "@farming-labs/theme/pixel-border";

export default defineDocs({
  entry: "docs",
  theme: pixelBorder(),
});

Don't forget the matching CSS import:

app/global.css
@import "tailwindcss";
@import "@farming-labs/theme/pixel-border/css";

Overriding Theme Defaults

Every theme accepts an overrides object:

overriding-theme-defaults.tsx
theme: pixelBorder({
  ui: {
    colors: { primary: "oklch(0.72 0.19 149)" },
    typography: {
      font: {
        h1: { size: "2.5rem", weight: 800 },
      },
    },
  },
}),

Creating a Custom Theme

For a comprehensive guide including publishing your theme as a package, see Creating Your Own Theme.

Use createTheme() to build your own:

my-theme/index.ts
import { createTheme } from "@farming-labs/docs";

export const myTheme = createTheme({
  name: "my-theme",
  ui: {
    colors: {
      primary: "#ff4d8d",
      background: "#0a0a0a",
      muted: "#888",
      border: "#222",
    },
    typography: {
      font: {
        style: { sans: "Inter, sans-serif" },
        h1: { size: "2.5rem", weight: 800 },
      },
    },
    layout: {
      contentWidth: 860,
      sidebarWidth: 280,
      toc: { enabled: true, depth: 3 },
    },
  },
});

Extending a Theme

Use extendTheme() to modify an existing preset:

extending-a-theme.ts
import { extendTheme } from "@farming-labs/docs";
import { fumadocs } from "@farming-labs/theme";

export const myTheme = extendTheme(fumadocs(), {
  name: "my-fumadocs",
  ui: {
    colors: { primary: "#22c55e" },
  },
});