---
title: "Themes"
description: "Built-in themes and how to create your own"
canonical_url: "https://docs.farming-labs.dev/docs/themes"
markdown_url: "https://docs.farming-labs.dev/docs/themes.md"
last_updated: "2018-10-20"
agent:
  tokenBudget: 750
  task: "Select and apply a built-in or custom theme to a Farming Labs docs site."
  outcome: "docs.config and the global stylesheet reference the same theme and docs pages render its visual defaults."
  appliesTo:
    framework:
      - "nextjs"
      - "tanstackstart"
      - "sveltekit"
      - "astro"
      - "nuxt"
    version:
      - ">=0.2.60"
    package:
      - "@farming-labs/docs"
      - "@farming-labs/theme"
  prerequisites:
    - "The docs app and its framework-specific global stylesheet already work."
    - "Choose a built-in preset before creating a custom theme unless requirements demand custom tokens."
  files:
    - "docs.config.tsx"
    - "src/lib/docs.config.ts"
    - "app/global.css"
    - "src/styles/app.css"
    - "src/app.css"
    - "nuxt.config.ts"
  sideEffects:
    - "Switching themes changes the default colors, typography, spacing, layout, and components for every docs page."
  verification:
    - description: "Build and open a docs page containing navigation, code, callouts, and tables."
      expect: "The production build succeeds and all elements use the selected theme without an unstyled flash."
  rollback:
    - "Restore the previous theme factory and matching CSS import."
  failureModes:
    - symptom: "The selected theme has no visual effect."
      resolution: "Import the matching theme CSS in the global stylesheet and restart the framework dev server."
    - symptom: "TypeScript cannot resolve the theme factory."
      resolution: "Install the correct framework theme package and import the documented exported preset name."
---

# Themes
URL: /docs/themes
LLM index: /llms.txt
Description: Built-in themes and how to create your own
Related: /docs/themes/creating-themes, /docs/configuration, /docs/customization/colors, /docs/customization/typography

<!-- farming-labs:agent-contract:start -->
## Agent Contract

Task: Select and apply a built-in or custom theme to a Farming Labs docs site.
Outcome: docs.config and the global stylesheet reference the same theme and docs pages render its visual defaults.

### Applies To

- Framework: `nextjs`, `tanstackstart`, `sveltekit`, `astro`, `nuxt`
- Version: `>=0.2.60`
- Package: `@farming-labs/docs`, `@farming-labs/theme`

### Prerequisites

- The docs app and its framework-specific global stylesheet already work.
- Choose a built-in preset before creating a custom theme unless requirements demand custom tokens.

### Files

- `docs.config.tsx`
- `src/lib/docs.config.ts`
- `app/global.css`
- `src/styles/app.css`
- `src/app.css`
- `nuxt.config.ts`

### Side Effects

- Switching themes changes the default colors, typography, spacing, layout, and components for every docs page.

### Verification

- Build and open a docs page containing navigation, code, callouts, and tables.
  - Expected: The production build succeeds and all elements use the selected theme without an unstyled flash.

### Rollback

- Restore the previous theme factory and matching CSS import.

### Failure Modes

- The selected theme has no visual effect. — Recovery: Import the matching theme CSS in the global stylesheet and restart the framework dev server.
- TypeScript cannot resolve the theme factory. — Recovery: Install the correct framework theme package and import the documented exported preset name.
<!-- farming-labs:agent-contract:end -->

# Themes

Select the factory and package subpath as a pair—for example, `pixelBorder` from `@farming-labs/theme/pixel-border` with `theme: pixelBorder()`—then import the matching `@farming-labs/theme/pixel-border/css` globally.
Test navigation, code blocks, callouts, and tables after switching presets. Use `createTheme()` for a reusable custom factory and `extendTheme()` to derive a theme from an existing preset.
If config builds but visuals do not change, repair the CSS entrypoint; if the factory cannot be resolved, copy its exact export and import path from the built-in themes table.

@farming-labs/docs ships with twelve 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, and `threadline` adds compact neutral chrome for chat and agent docs.

<Callout type="tip" title="Create your own theme">
  Want to build a custom theme or publish one as a package? See **[Creating your own theme](/docs/themes/creating-themes)** for the full guide.
</Callout>

## Built-in Themes

| Theme                                     | Import                             | Description                             |
| ----------------------------------------- | ---------------------------------- | --------------------------------------- |
| [Default](/docs/themes/default)           | `@farming-labs/theme`              | Neutral colors, standard radius         |
| [Colorful](/docs/themes/colorful)         | `@farming-labs/theme/colorful`     | Warm amber accent, Inter typography     |
| [Darksharp](/docs/themes/darksharp)       | `@farming-labs/theme/darksharp`    | All-black, sharp corners                |
| [Pixel Border](/docs/themes/pixel-border) | `@farming-labs/theme/pixel-border` | Inspired by better-auth.com             |
| [Shiny](/docs/themes/shiny)               | `@farming-labs/theme/shiny`        | Clerk-inspired, purple accents          |
| [Threadline](/docs/themes/threadline)     | `@farming-labs/theme/threadline`   | Compact neutral shell for chat and agent docs |
| [DarkBold](/docs/themes/darkbold)         | `@farming-labs/theme/darkbold`     | Pure monochrome, Geist typography       |
| [GreenTree](/docs/themes/greentree)       | `@farming-labs/theme/greentree`    | Mintlify-inspired, emerald green accent |
| [Concrete](/docs/themes/concrete)         | `@farming-labs/theme/concrete`     | Brutalist poster-style hard-edge theme  |
| [Command Grid](/docs/themes/command-grid) | `@farming-labs/theme/command-grid` | Mono-first paper-grid preset inspired by better-cmdk |
| [Ledger](/docs/themes/ledger)             | `@farming-labs/theme/ledger`       | Stripe Docs-inspired product docs shell |
| [Hardline](/docs/themes/hardline)         | `@farming-labs/theme/hardline`     | Original hard-edge theme with strong borders |

## Using a Theme

```tsx title="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:

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

## Overriding Theme Defaults

Every theme accepts an overrides object:

```tsx title="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](/docs/themes/creating-themes)**.

Use `createTheme()` to build your own:

```ts title="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:

```ts title="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" },
  },
});
```

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.
Docs-scoped sitemap: [/docs/sitemap.md](/docs/sitemap.md).
Well-known sitemap: [/.well-known/sitemap.md](/.well-known/sitemap.md).