Dark Mode

Dark mode is driven by data-theme="dark" on the <html> element — not a class — and is managed by the kit's ThemeProvider.

Setup

import { ThemeProvider } from "@countryclub/ui-react";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute="data-theme"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

The provider injects a tiny inline script that applies the stored theme before hydration, so there is no flash of the wrong theme.

Toggling the theme

"use client";

import { Button, useTheme } from "@countryclub/ui-react";
import { MoonIcon, SunIcon } from "lucide-react";

export function ThemeToggle() {
  const { resolvedTheme, setTheme } = useTheme();

  return (
    <Button
      variant="ghost"
      size="icon"
      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
    >
      {resolvedTheme === "dark" ? <MoonIcon /> : <SunIcon />}
    </Button>
  );
}

Styling dark mode

The design system registers a custom dark: variant that matches [data-theme="dark"], so the regular Tailwind syntax works:

<div className="bg-background dark:bg-input/32">…</div>