Theming

Install the theme#

pnpm dlx shadcn@latest add @balick/theme

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#

Paper and ink: one cool hue family instead of pure black and white. Light mode is ink on paper, dark mode is paper on ink. Cards and popovers sit above the canvas, muted surfaces below it, and emphasis comes from inverting foreground and background rather than from an accent colour. Radius: 0.5rem.

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.

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

@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.