Dark Mode

Dark Mode

ForgeUI is designed dark-first. All components look premium in dark mode out of the box.

How It Works

ForgeUI uses next-themes for seamless dark/light/system theme switching:

// src/components/shared/theme-provider.tsx
"use client";

import { ThemeProvider as NextThemesProvider } from "next-themes";

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  return (
    <NextThemesProvider
      attribute="class"
      defaultTheme="dark"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </NextThemesProvider>
  );
}

Using the Theme Toggle

The built-in ThemeSwitcher component provides a dropdown with Dark, Light, and System options:

import { ThemeSwitcher } from "@/components/shared/theme-switcher";

export function Header() {
  return (
    <nav>
      <ThemeSwitcher />
    </nav>
  );
}

Customizing Dark/Light Tokens

Override colors per theme using CSS media queries or class selectors:

:root {
  --background: #0A0A0A;
  --text: #F9FAFB;
}

.light {
  --background: #FFFFFF;
  --text: #111827;
}

Best Practices

1. 1Test both modes — Always verify components in light and dark themes
2. 2Use opacity for borders — border-gray-800/60 works in both modes
3. 3Avoid pure black — Use #0A0A0A instead of #000 for softer dark backgrounds
4. 4Use CSS variables — Reference var(--background) rather than hardcoded colors