---
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."
---

<!-- 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
URL: /docs/themes
Description: Built-in themes and how to create your own
Related: /docs/themes/creating-themes, /docs/configuration, /docs/customization/colors, /docs/customization/typography

Select factory and package subpath as a pair—e.g., `pixelBorder` from `@farming-labs/theme/pixel-border` with `theme: pixelBorder()`—then import `@farming-labs/theme/pixel-border/css` globally. Use `createTheme()` for custom factories and `extendTheme()` to derive from a preset. If visuals don't change, fix the CSS entrypoint; if the factory can't be resolved, copy its exact export and import path from the table below.

## 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(),
});
```

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

## 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` | Gray architectural surfaces |

## 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).