Theming

Overview

We use Tailwind CSS for styling and CSS Variables for theming. This allows for easy customization and dark mode support out of the box.

Customizing Colors

The color palette is defined in src/app/globals.css using CSS variables. These variables are mapped to Tailwind utility classes in tailwind.config.ts.

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  /* ... other colors */
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  /* ... dark mode colors */
}

To change the primary color (e.g., to your brand color), simply update the HSL values for --primary and --primary-foreground in both the root and dark blocks.

Dark Mode

Dark mode is supported via the next-themes package.

To force a specific theme, you can change the default theme in the ThemeProvider component found in src/app/layout.tsx (or providers.tsx if separated).

Fonts

We use next/font to optimize and load fonts.

The font configuration is typically located in src/app/layout.tsx. You can replace the imported font (e.g., Inter) with any other Google Font or local font.