Home /

docs

Ledger Theme

A product-docs preset inspired by , with neutral branding for @farming-labs/docs projects.

Usage

docs.config.ts
import { defineDocs } from "@farming-labs/docs";
import { ledger } from "@farming-labs/theme/ledger";

export default defineDocs({
  entry: "docs",
  theme: ledger(),
});
app/global.css
@import "tailwindcss";
@import "@farming-labs/theme/ledger/css";

Defaults

PropertyValue
Primary#5f6cf6
Background#f6f8fb (light), #0f1424 (dark)
Border#dbe3ef
Border radius0.5rem
Content width820px
Sidebar width292px
Header height64px

Style Notes

  • Compact tab-like navigation and pill search controls
  • Light product-docs surfaces with subtle borders and restrained shadows
  • Blue-violet active states for sidebar, TOC, tabs, and actions
  • Deep navy code blocks designed to stand out from the light docs shell

Customizing

customizing.tsx
theme: ledger({
  ui: {
    colors: { primary: "#2563eb" },
    layout: { sidebarWidth: 304, tocWidth: 248 },
  },
}),
Customize
Live preview on these docs
Reset
Customize
Export Code
Preset
Explore more themes
Primary Color
Primary
Colors
Background
Foreground
Muted Text
Border
Card
Muted BG
Ring
Layout
SidebarBordered
TOC StyleDirectional (tree)
TOC DepthH2 + H3
Ask AI
ModeFloating
Floating StyleFull Modal
PositionBottom Right
Features