---
title: "Colorful"
description: "Warm amber accent with Inter typography and a clean layout"
canonical_url: "https://docs.farming-labs.dev/docs/themes/colorful"
markdown_url: "https://docs.farming-labs.dev/docs/themes/colorful.md"
last_updated: "2018-10-20"
agent:
  tokenBudget: 750
---

# Colorful
URL: /docs/themes/colorful
LLM index: /llms.txt
Description: Warm amber accent with Inter typography and a clean layout
Related: /docs/themes, /docs/customization/colors, /docs/customization/typography, /docs/themes/creating-themes

# Colorful Theme

Apply this preset with `colorful` from `@farming-labs/theme/colorful`, `theme: colorful()` in `docs.config.ts`, and `@import "@farming-labs/theme/colorful/css"` in `app/global.css`.
Check for the amber `hsl(40, 96%, 40%)` primary, 768px content width, and directional TOC; the documented overrides are `ui.colors.primary` and `ui.layout.contentWidth`.
If the config compiles but those defaults are absent, make the CSS subpath match the `colorful` factory before changing theme tokens.

A warm, vibrant theme with an amber primary accent, Inter typography, and directional TOC styling.

## Usage

```tsx title="docs.config.ts"
import { defineDocs } from "@farming-labs/docs";
import { colorful } from "@farming-labs/theme/colorful";

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

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

## Defaults

| Property      | Value                       |
| ------------- | --------------------------- |
| Primary       | `hsl(40, 96%, 40%)` (Amber) |
| Background    | `#ffffff`                   |
| Border        | `#e5e7eb`                   |
| Border radius | Standard                    |
| Content width | 768px                       |
| Sidebar width | 260px                       |
| TOC style     | Directional                 |

## Customizing

```tsx 
theme: colorful({
  ui: {
    colors: { primary: "hsl(210, 96%, 45%)" },
    layout: { contentWidth: 900 },
  },
}),
```

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