Dark mode

Blocks are theme-aware by construction. They read the same tokens in light and dark, so you don't maintain two versions — you flip one class and everything follows.

How it works

A .dark class on <html> swaps the CSS variables; the tokens the blocks use resolve to their dark values automatically. The standard way to toggle that class is next-themes:

app/layout.tsx

import { ThemeProvider } from "next-themes";

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system">
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

That's it — no per-block setup. If a block looks right in light but not dark, the culprit is almost always a hard-coded color you added on top; keep to the tokens (see Theming) and it just works.

Keeping blocks current over time.Updates