Theme Kit ships a built-in neutral theme, so you can skip defining tokens entirely and still get a complete, toggleable light/dark theme. These snippets are the whole setup.

1 · Install

Two packages: the framework-agnostic core, and the adapter for your stack.

bash

pnpm add @theme-kit/core @theme-kit/next

2 · Wrap your app

Mount the provider at the root. With no themes prop, Theme Kit applies its built-in neutral light/dark themes.

app/layout.tsx

tsx

1// app/layout.tsx — no theme definition needed
2import { ThemeProvider } from "@theme-kit/next";
3
4export default function RootLayout({ children }) {
5  // No `themes` prop → the server resolves the built-in neutral theme
6  // and inlines it before hydration. Pick "light" | "dark" (or omit → system).
7  return (
8    <ThemeProvider defaultTheme="light">
9      {children}
10    </ThemeProvider>
11  );
12}

Picking the variant

defaultTheme="light" starts on the neutral light theme, "dark" on dark. Omit it and the system preference is used.

Where it comes from

The default set comes from getBuiltInThemes() — the same function you call when you want built-ins alongside your own themes.

3 · Use the theme

You now have the full runtime: semantic tokens mapped to CSS variables, a light/dark toggle, persistence, and history. Style with token utilities — bg-primary, text-foreground, border-border.

Ready for real themes?

The built-in neutral theme is a starting point, not a ceiling. When you want your own palette, define a theme and pass it to the themes prop.

built-in + your own

1// The built-in set is just two themes, but they cover the
2// complete semantic token shape. Import them explicitly when
3// you want them alongside your own themes.
4import { getBuiltInThemes, getNeutralThemes } from "@theme-kit/core";
5
6const [light, dark] = getNeutralThemes();
7
8const themes = [...getBuiltInThemes(), ...myThemes];

Full get-started guide Define your first theme