Theming

CSS Variables

The theme uses CSS custom properties for easy customization.

Color System

Edit src/styles/globals.css:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --destructive: 0 84.2% 60.2%;
  --border: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
}

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

Brand Colors

To use your brand colors:

Convert hex to HSL values
Update the CSS variables
Rebuild the app

Example for #3B82F6 (blue):

:root {
  --primary: 217 91% 60%;  /* #3B82F6 in HSL */
}

Tailwind Configuration

Extend Tailwind in tailwind.config.ts:

import type { Config } from 'tailwindcss';

const config: Config = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        heading: ['Cal Sans', 'sans-serif'],
      },
    },
  },
};

export default config;

Typography

Custom Fonts

Add font files to public/fonts/
Import in CSS:

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/CustomFont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

Use in Tailwind:

fontFamily: {
  sans: ['CustomFont', 'sans-serif'],
}

Using Google Fonts

src/app/layout.tsx

import { Inter, Playfair_Display } from 'next/font/google';

const inter = Inter({ subsets: ['latin'], variable: '--font-sans' });
const playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-heading' });

export default function RootLayout({ children }) {
  return (
    <html className={`${inter.variable} ${playfair.variable}`}>
      {children}
    </html>
  );
}

Dark Mode

Dark mode is handled via next-themes:

// Toggle dark mode
import { useTheme } from 'next-themes';

function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  
  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      Toggle theme
    </button>
  );
}

Fumadocs Theme

Fumadocs has its own theme variables:

:root {
  --fd-background: var(--background);
  --fd-foreground: var(--foreground);
  --fd-primary: var(--primary);
  /* ... */
}

See Fumadocs Theming for details.

Was this page helpful?

Theming

On this page