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

# Shiny Theme

Use this page when the user asks about this topic: Clerk-inspired theme with purple accents and a polished light/dark design.
Keep answers grounded in the exact options, routes, commands, and examples documented here.
If the request moves beyond this page, point to the closest related docs instead of inventing config.

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 },
  },
}),
```