Pixel Border Theme
Inspired by — 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
| 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 |
| Header height | 56px |
| h1 | 2.25rem, weight 700, line-height 1.2 |
| h2 | 1.5rem, weight 600, line-height 1.3 |
| h3 | 1.25rem, weight 600, line-height 1.4 |
| h4 | 1.125rem, weight 600, line-height 1.4 |
| Body text | 1rem, weight 400, line-height 1.75 |
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
Inspired by better-auth.com — refined dark UI with visible borders
How is this guide?