Theming

helpbase uses shadcn/ui's theming system. Colors, fonts, spacing, and dark mode are all controlled through CSS variables in app/globals.css.

CSS variables

The core theme is defined in :root and .dark selectors:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  /* ... */
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  /* ... */
}

Tip

helpbase uses oklch color space for perceptually uniform colors. You can use any color format CSS supports, but oklch gives the most predictable results across light and dark modes.

Dark mode

Dark mode is handled by next-themes. The toggle is in the header. Users' preferences persist across sessions via localStorage.

To change the default theme, update the ThemeProvider in app/layout.tsx:

<ThemeProvider defaultTheme="dark" attribute="class">

Fonts

The default font stack uses system fonts for fast loading. To use a custom font:

Import the font

// app/layout.tsx
import { Inter } from "next/font/google"
const inter = Inter({ subsets: ["latin"] })

Apply to the body

<body className={inter.className}>

Article typography

Article content uses the .article-content class defined in globals.css. This controls:

Heading sizes and spacing
Paragraph line height
Code block styling
Table formatting
Blockquote appearance
Image border radius

All values are customizable through the CSS class without touching component code.

Adding shadcn components

Since helpbase is built on shadcn/ui, you can add any shadcn component:

npx shadcn add button dialog dropdown-menu

Components install into components/ui/ and use your theme variables automatically.