---
title: "Shiny"
description: "Clerk-inspired theme with purple accents and a polished light/dark design"
canonical_url: "https://docs.farming-labs.dev/docs/themes/shiny"
markdown_url: "https://docs.farming-labs.dev/docs/themes/shiny.md"
last_updated: "2018-10-20"
agent:
  tokenBudget: 750
---

# Shiny
URL: /docs/themes/shiny
LLM index: /llms.txt
Description: Clerk-inspired theme with purple accents and a polished light/dark design
Related: /docs/themes, /docs/themes/greentree, /docs/customization/colors, /docs/customization/typography

# Shiny Theme

Shiny pairs `shiny` from `@farming-labs/theme/shiny` with `theme: shiny()` and `@farming-labs/theme/shiny/css` after Tailwind in `app/global.css`.
Confirm the purple `hsl(256, 100%, 64%)` primary, polished light/dark surfaces, 280px sidebar, and 64px header; the local examples permit `ui.colors.primary` and `ui.layout.sidebarWidth` changes.
If those dimensions apply without the polished surfaces, verify the `/shiny/css` package export is present rather than copying Clerk-specific styles.

Inspired by <HoverLink href="https://clerk.com/docs" title="Clerk Docs" description="Clerk's documentation combines polished product styling, strong hierarchy, and approachable auth-focused guides." linkLabel="Visit Clerk Docs" external>Clerk</HoverLink> — a clean, polished UI with purple accents and a professional light/dark design.

## Usage

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

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

```css title="app/global.css"
@import "tailwindcss";
@import "@farming-labs/theme/shiny/css";
```

## Defaults

| Property      | Value                          |
| ------------- | ------------------------------ |
| Primary       | `hsl(256, 100%, 64%)` (Purple) |
| Background    | `#f7f7f8`                      |
| Border        | `#e5e5ea`                      |
| Border radius | Standard                       |
| Content width | 768px                          |
| Sidebar width | 280px                          |
| Header height | 64px                           |

## Customizing

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

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