# Pixel Border
URL: /docs/themes/pixel-border
LLM index: /llms.txt
Description: Inspired by better-auth.com — refined dark UI with visible borders

# Pixel Border Theme

Use this page when the user asks about this topic: Inspired by better-auth.com - refined dark UI with visible borders.
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.

Inspired by <HoverLink href="https://better-auth.com" title="better-auth" description="An authentication framework site with a sharp dark docs aesthetic, visible borders, and strong contrast-driven layout." linkLabel="Visit better-auth" external>better-auth.com</HoverLink> — a clean dark UI with visible borders, pixel-perfect spacing, and a refined sidebar. The active sidebar indicator and text use your primary color.

## Usage

```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";
```

## Defaults

| Property      | Value                                     |
| ------------- | ----------------------------------------- |
| Primary       | Near-white (`oklch(0.985 0.001 106.423)`) |
| Background    | `hsl(0 0% 2%)`                            |
| Border        | `hsl(0 0% 15%)`                           |
| Border radius | `0px`                                     |
| Content width | 860px                                     |
| Sidebar width | 286px                                     |

## Sidebar Features

- Full-width border separators between top-level items
- Collapsible folder groups with expand/collapse arrows
- Active state: primary-colored text + left vertical indicator bar
- Nested children are indented with smaller text
- Folder parents use slightly muted text when collapsed

## Customizing

```tsx title="customizing.tsx"
theme: pixelBorder({
  ui: {
    colors: { primary: "oklch(0.72 0.19 149)" },
    typography: {
      font: {
        h1: { size: "2.5rem", weight: 800 },
      },
    },
  },
}),
```

The `primary` color flows to:

- Active sidebar item text
- Active sidebar indicator bar (`::before`)
- Active TOC item
- Links and other primary-colored elements