---
title: "Pixel Border"
description: "Inspired by better-auth.com — refined dark UI with visible borders"
canonical_url: "https://docs.farming-labs.dev/docs/themes/pixel-border"
markdown_url: "https://docs.farming-labs.dev/docs/themes/pixel-border.md"
last_updated: "2018-10-20"
agent:
  tokenBudget: 750
---

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

# Pixel Border Theme

Pixel Border's required trio is `pixelBorder` from `@farming-labs/theme/pixel-border`, `theme: pixelBorder()`, and the CSS entrypoint `@farming-labs/theme/pixel-border/css`.
Verify the `hsl(0 0% 2%)` dark background, visible borders, `0px` radius, and active sidebar indicator; a `ui.colors.primary` override must flow to sidebar text, the indicator bar, TOC state, and links.
When the primary value changes but the bordered sidebar does not, restore the `/pixel-border/css` import before targeting component selectors manually.

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

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