Theming

Every component and block is styled with the shadcn/ui CSS variables, so they follow your theme. Install the Balick palette to get the exact look of this site.

Install the theme#

pnpm dlx shadcn@latest add https://ui.balick.me/r/theme.json

The CLI writes the colour tokens, the radius and their dark variants to your global CSS file. Review the diff before committing if you already customised your theme.

Tokens#

A monochrome palette: contrast does the work, and emphasis comes from inverting foreground and background rather than from an accent colour. Radius: 0.5rem.

Token	Light	Dark
`--background`	`oklch(1 0 0)`	`oklch(0 0 0)`
`--foreground`	`oklch(0.145 0 0)`	`oklch(0.985 0 0)`
`--card`	`oklch(1 0 0)`	`oklch(0.145 0 0)`
`--card-foreground`	`oklch(0.145 0 0)`	`oklch(0.985 0 0)`
`--popover`	`oklch(1 0 0)`	`oklch(0.16 0 0)`
`--popover-foreground`	`oklch(0.145 0 0)`	`oklch(0.985 0 0)`
`--primary`	`oklch(0.145 0 0)`	`oklch(0.985 0 0)`
`--primary-foreground`	`oklch(0.985 0 0)`	`oklch(0.145 0 0)`
`--secondary`	`oklch(0.97 0 0)`	`oklch(0.22 0 0)`
`--secondary-foreground`	`oklch(0.205 0 0)`	`oklch(0.985 0 0)`
`--muted`	`oklch(0.97 0 0)`	`oklch(0.2 0 0)`
`--muted-foreground`	`oklch(0.52 0 0)`	`oklch(0.7 0 0)`
`--accent`	`oklch(0.965 0 0)`	`oklch(0.22 0 0)`
`--accent-foreground`	`oklch(0.205 0 0)`	`oklch(0.985 0 0)`
`--destructive`	`oklch(0.577 0.245 27.325)`	`oklch(0.704 0.191 22.216)`
`--border`	`oklch(0.92 0 0)`	`oklch(1 0 0 / 12%)`
`--input`	`oklch(0.92 0 0)`	`oklch(1 0 0 / 15%)`
`--ring`	`oklch(0.708 0 0)`	`oklch(0.556 0 0)`

Typography#

Components inherit your fonts. This site uses Geist and Geist Mono; to match it in a Next.js app, load them with next/font and map them to the Tailwind font variables.

app/layout.tsx

import { Geist, Geist_Mono } from "next/font/google"

const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] })
const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] })

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
        {children}
      </body>
    </html>
  )
}

app/globals.css

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

Dark mode#

Dark values live under the .dark class, like shadcn/ui. Toggle it with next-themes using attribute="class". Every block is designed and checked in both modes.