Theme

Theme management components providing dark mode toggle and theme persistence.

Theme Components (components/theme/)

Theme management components providing dark mode toggle and theme persistence.

Components

Theme-related UI and logic:

• Theme toggle button/switch
• Theme provider context
• Theme persistence (localStorage)
• System theme detection

Features

• Dark/Light Modes: Toggle between themes
• System Default: Respect OS preference
• Persistence: Remember user choice across sessions
• Smooth Transitions: Animated theme switching
• Accessibility: Proper contrast in both modes

Usage

import { ThemeToggle } from "@/components/theme/theme-toggle";
import { ThemeProvider } from "@/components/theme/theme-provider";

export default function Layout({ children }: Props) {
  return (
    <ThemeProvider>
      <nav>
        <ThemeToggle />
      </nav>
      {children}
    </ThemeProvider>
  );
}

Theme Variables

Themes are defined with CSS variables in globals.css:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
}

Implementation

Uses next-themes library for:

• Theme state management
• localStorage persistence
• System preference detection
• SSR-safe hydration