Pixel Border Theme

Inspired by better-auth.com — 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

import { defineDocs } from "@farming-labs/docs";
import { pixelBorder } from "@farming-labs/theme/pixel-border";

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

@import "tailwindcss";
@import "@farming-labs/theme/pixel-border/css";

Defaults

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

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