Styles & Theme

All visual styles are controlled by CSS variables in src/app/global.css, using the HSL color format. You can change the entire look of the site by modifying a few variables.

Changing the Brand Color

The primary brand color is defined by --brand and --primary. Modify both light and dark mode:

src/app/global.css

/* Light mode */
:root {
  --brand: 221 100% 60%;       /* Current: Blue */
  --brand-hover: 221 100% 57%;
  --primary: 221 100% 60%;
  --primary-foreground: 0 0% 100%;
}

/* Dark mode */
.dark {
  --brand: 221 100% 65%;
  --brand-hover: 221 100% 68%;
  --primary: 221 100% 65%;
}

Example: Change to green

:root {
  --brand: 142 76% 36%;
  --brand-hover: 142 76% 32%;
  --primary: 142 76% 36%;
}

.dark {
  --brand: 142 76% 46%;
  --brand-hover: 142 76% 50%;
  --primary: 142 76% 46%;
}

Core Color Variables

Variable	Purpose	Light Default
`--background`	Page background	`210 20% 98%`
`--foreground`	Main text color	`215 25% 12%`
`--card`	Card background	`0 0% 100%`
`--border`	Border color	`210 14% 93%`
`--accent`	Accent background	`221 100% 97%`
`--accent-foreground`	Accent text	`221 80% 40%`
`--muted`	Muted background	`210 18% 96.5%`
`--muted-foreground`	Secondary text	`215 16% 48%`
`--brand`	Brand/primary color	`221 100% 60%`
`--brand-hover`	Brand hover state	`221 100% 57%`
`--primary`	Primary UI color	`221 100% 60%`
`--primary-foreground`	Text on primary	`0 0% 100%`

Dark Mode

Override any variable under the .dark selector in global.css. The theme toggle is handled automatically via fumadocs-theme (stored in localStorage).

Shadow Tokens

:root {
  --shadow-sm: 0 1px 2px rgba(16, 30, 54, 0.06);
  --shadow-md: 0 2px 6px rgba(16, 30, 54, 0.08);
  --shadow-lg: 0 8px 24px rgba(16, 30, 54, 0.12);
}

Changing Fonts

The default font is Plus Jakarta Sans. To change it, edit src/app/layout.tsx:

src/app/layout.tsx

import { Inter } from "next/font/google"; // Change import

const font = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
  display: "optional",
});

Tailwind CSS Usage

Colors are mapped to Tailwind classes via @theme in global.css:

@theme {
  --color-brand: hsl(var(--brand));
  --color-primary: hsl(var(--primary));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
}

Use in components: bg-brand, text-primary, bg-background, border-border, etc.