Themes
@farming-labs/docs ships with thirteen built-in theme entrypoints. Each is a preset factory function that you pass to defineDocs(). hardline stays as the original hard-edge preset, concrete is the louder brutalist variant, command-grid is the mono-first paper-grid preset inspired by the better-cmdk landing page, ledger brings a Stripe Docs-inspired product documentation shell, shadcn recreates the compact neutral shadcn/ui documentation shell, and threadline adds compact neutral chrome for chat and agent docs.
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
| Theme | Import | Description |
|---|---|---|
| Default | @farming-labs/theme | Neutral colors, standard radius |
| Colorful | @farming-labs/theme/colorful | Warm amber accent, Inter typography |
| Darksharp | @farming-labs/theme/darksharp | All-black, sharp corners |
| Pixel Border | @farming-labs/theme/pixel-border | Inspired by better-auth.com |
| Shiny | @farming-labs/theme/shiny | Clerk-inspired, purple accents |
| Threadline | @farming-labs/theme/threadline | Compact neutral shell for chat and agent docs |
| DarkBold | @farming-labs/theme/darkbold | Pure monochrome, Geist typography |
| GreenTree | @farming-labs/theme/greentree | Mintlify-inspired, emerald green accent |
| Concrete | @farming-labs/theme/concrete | Brutalist poster-style hard-edge theme |
| Command Grid | @farming-labs/theme/command-grid | Mono-first paper-grid preset inspired by better-cmdk |
| Ledger | @farming-labs/theme/ledger | Stripe Docs-inspired product docs shell |
| Shadcn | @farming-labs/theme/shadcn | Compact neutral shadcn/ui docs shell |
| Hardline | @farming-labs/theme/hardline | Original hard-edge theme with strong borders |
Using a Theme
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:
@import "tailwindcss";
@import "@farming-labs/theme/pixel-border/css";Overriding Theme Defaults
Every theme accepts an overrides object:
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:
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:
import { extendTheme } from "@farming-labs/docs";
import { fumadocs } from "@farming-labs/theme";
export const myTheme = extendTheme(fumadocs(), {
name: "my-fumadocs",
ui: {
colors: { primary: "#22c55e" },
},
});Built-in themes and how to create your own
How is this guide?