# Themes
URL: /docs/themes
LLM index: /llms.txt
Description: Built-in themes and how to create your own

# Themes

Use this page when the user asks about this topic: Built-in themes and how to create your own.
Keep answers grounded in the exact options, routes, commands, and examples documented here.
If the request moves beyond this page, point to the closest related docs instead of inventing config.

@farming-labs/docs ships with eleven 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, and `ledger` brings a Stripe Docs-inspired product documentation shell.

<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          |
| [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" },
  },
});
```