Veloria UI

Dark Mode

Veloria UI uses the class strategy for dark mode. Every component ships with a dark theme out of the box — just add dark to your HTML element.

Tailwind setup

Make sure darkMode: ["class"] is set in your Tailwind config:

ts
// tailwind.config.ts
export default {
  darkMode: ["class"],
  // ...
};

With next-themes

The recommended approach for Next.js apps:

bash
$npm install next-themes
js
// app/layout.tsx
import { ThemeProvider } from "next-themes";
 
export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Using the built-in hook

Veloria UI ships a useTheme hook that persists to localStorage:

tsx
import { useTheme, ThemeSwitcher } from "veloria-ui";
 
function Header() {
  const { theme, setTheme } = useTheme();
 
  return (
    <ThemeSwitcher
      value={theme}
      onChange={setTheme}
      variant="toggle"
    />
  );
}
ThemingCLI