Theming
The documentation template uses CSS custom properties (design tokens) for all colours, making it straightforward to apply your brand. All tokens are defined in globals.css.
Design tokens
The template uses a comprehensive set of design tokens that map to Tailwind CSS utility classes via the @theme inline directive:
:root {
--background: oklch(0.995 0 0);
--foreground: oklch(0.13 0 0);
--primary: oklch(0.13 0 0);
--primary-foreground: oklch(0.995 0 0);
--secondary: oklch(0.965 0 0);
--muted: oklch(0.965 0 0);
--muted-foreground: oklch(0.48 0 0);
--accent: oklch(0.55 0.19 155);
--border: oklch(0.91 0 0);
--code-bg: oklch(0.96 0 0);
}Customising colours
To change the accent colour across the entire site, update the --accent token in both the light and dark theme definitions:
:root {
/* Green accent (default) */
--accent: oklch(0.55 0.19 155);
/* Blue accent */
/* --accent: oklch(0.55 0.15 250); */
/* Orange accent */
/* --accent: oklch(0.65 0.18 50); */
}OKLCH colour space
oklch(lightness chroma hue).Dark mode
Dark mode is handled by next-themes and the .dark CSS class. Define dark variants for all your tokens:
.dark {
--background: oklch(0.1 0 0);
--foreground: oklch(0.93 0 0);
--accent: oklch(0.72 0.19 155);
--border: oklch(0.22 0 0);
--code-bg: oklch(0.15 0 0);
}Typography
Fonts are configured in layout.tsx using next/font/google, then referenced in globals.css via the @theme inline block:
@theme inline {
--font-sans: 'Geist', 'Geist Fallback';
--font-mono: 'Geist Mono', 'Geist Mono Fallback';
}Prose styles
Documentation content is styled using the .docs-prose CSS class. This provides consistent typography for headings, paragraphs, lists, tables, and code blocks. Customise these styles in globals.css to match your brand.
.docs-prose h1 {
@apply text-3xl font-bold tracking-tight text-foreground mb-4 mt-2;
}
.docs-prose h2 {
@apply text-2xl font-semibold tracking-tight text-foreground mt-10 mb-4
pb-2 border-b border-border;
}
.docs-prose p {
@apply text-base leading-7 text-foreground/85 mb-4;
}