Theming
Compact Tailwind + shadcn theme customization guide.
AI Skill for theming
Prompt: Type
/theming in your Copilot / Cursor or other chat to use skill with the provided context./theming Update the default app theme colors or fonts.
Quick Start: Theme Generators
The easiest way to theme your app is to use a theme generator, then copy-paste the CSS output into your global.css file below.
- shadcn/ui Themes - Official shadcn/ui theme generator.
- TweakCN - Interactive shadcn theme generator.
Use the two files below to customize your project theme.
/* src/app/global.css */
/* 1) Change core theme tokens */
:root {
--radius: 0.875rem;
--background: oklch(0.99 0.01 95);
--foreground: oklch(0.2 0.03 255);
--primary: oklch(0.55 0.2 25);
--primary-foreground: oklch(0.98 0.01 95);
--brand: oklch(0.62 0.22 28);
--highlight: oklch(0.9 0.14 85);
}
/* 2) Add matching dark theme */
.dark {
--background: oklch(0.18 0.01 255);
--foreground: oklch(0.95 0.02 95);
--primary: oklch(0.74 0.16 40);
--primary-foreground: oklch(0.2 0.02 255);
--brand: oklch(0.74 0.18 40);
--highlight: oklch(0.85 0.14 92);
}
/* 3) Keep shadcn/tailwind semantic mapping */
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-border: var(--border);
--color-ring: var(--ring);
--color-brand: var(--brand);
--color-highlight: var(--highlight);
--font-sans: var(--font-sans);
--font-display: var(--font-display);
}
/* Optional helper for headings */
.font-display {
font-family: var(--font-display), sans-serif;
}// src/app/[locale]/layout.tsx
import { Manrope, Space_Grotesk } from 'next/font/google';
const manrope = Manrope({
subsets: ['latin'],
variable: '--font-sans',
});
const spaceGrotesk = Space_Grotesk({
subsets: ['latin'],
variable: '--font-display',
});
// Replace:
// <html lang={locale} className={inter.className} suppressHydrationWarning>
<html
lang={locale}
className={`${manrope.variable} ${spaceGrotesk.variable}`}
suppressHydrationWarning
>Use classes in UI: bg-background text-foreground, bg-primary text-primary-foreground, border-border ring-ring, font-sans for base text, font-display for headings.
Other resources
- Magic UI Installation - Re-usable components you can copy into your app.