Dark Mode Setup

Using next-themes (Recommended)

TonuComponent works great with `next-themes` for dark mode support.

Installation

bash

npm install next-themes

Setup

Wrap your app with the ThemeProvider:

tsx

// app/layout.tsx (Next.js)
import { ThemeProvider } from 'next-themes'

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

For React:

tsx

// App.tsx
import { ThemeProvider } from 'next-themes'

function App() {
  return (
    <ThemeProvider attribute="class" defaultTheme="system">
      {/* Your app */}
    </ThemeProvider>
  )
}

Theme Toggle Component

tsx

'use client';

import { useTheme } from 'next-themes';
import { Moon, Sun } from 'lucide-react';

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

  return (
    <button
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
      className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
    >
      {theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
    </button>
  );
}

Tailwind Dark Mode

Ensure Tailwind is configured for dark mode:

// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media'
  // ...
}

Dark Mode Classes

All TonuComponent components use the `dark:` prefix for dark mode styles:

tsx

<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  Content
</div>