Theming

Edit src/styles/globals.css for colors and src/styles/fonts.css for fonts. Shared shadcn and Fumadocs components consume these CSS variables, so change the tokens before restyling individual components.

Change color tokens

The existing light theme uses complete CSS colors:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.65 0.2 45);
  --ring: var(--primary);
}

Keep values valid CSS colors when replacing them. Set --primary-foreground with the action color so its text remains legible, and review focus rings, muted text, borders and disabled states in the running app. The neutral --accent surface and orange --brand-accent have separate jobs.

Dark-theme overrides live in the same stylesheet under .dark.

Extend Tailwind

This app uses Tailwind 4 through the Vite plugin. Add theme tokens in CSS; there is no required tailwind.config.ts file. For example, add your own brand utility to src/styles/globals.css:

@theme {
  --color-brand-500: #1d4ed8;
}

The new token supplies utilities such as bg-brand-500 and text-brand-500. See the Tailwind theme reference.

Replace local fonts

src/styles/fonts.css loads the Latin variable WOFF2 files from the installed @fontsource-variable/geist and @fontsource-variable/geist-mono packages. It defines --font-sans and --font-mono; the root route imports the stylesheet.

To use a font file of your own, put it at public/fonts/Brand.woff2 and add its face to src/styles/fonts.css:

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

:root {
  --font-sans: 'Brand', Arial, sans-serif;
}

Match the declared weights to your actual font file. Load your page in the browser and verify the font response and rendered text. Blog social images use their separate TTF artwork input; update that input too if the artwork should use your new typeface.

Enable a theme preference

The shipped Fumadocs provider in src/components/provider.tsx disables its theme switch. To add a user preference, enable the existing provider's theme option, choose its default theme, and remove forcedTheme. Then render a control using useTheme from the installed next-themes package. Keep one theme provider for the app.

See Fumadocs theme configuration for provider options. Check both light and dark states, including inputs, charts, focus indicators and Docs navigation, before making the preference available.

What's next

• Components — change reusable UI.
• Landing Page — customize public sections.