Home /

docs

Shiny Theme

Inspired by — a clean, polished UI with purple accents and a professional light/dark design.

Usage

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

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

Defaults

PropertyValue
Primaryhsl(256, 100%, 64%) (Purple)
Background#f7f7f8
Border#e5e5ea
Border radiusStandard
Content width768px
Sidebar width280px
Header height64px

Customizing

customizing.tsx
theme: shiny({
  ui: {
    colors: { primary: "hsl(170, 80%, 45%)" },
    layout: { sidebarWidth: 300 },
  },
}),