ThemeProvider

The ThemeProvider manages multi-theme support with automatic light/dark mode switching. It persists user preferences to localStorage and respects system preferences when using the "system" mode.

Installation

The ThemeProvider is already configured in src/app/layout.tsx. No additional installation is required.

Usage

import { ThemeProvider } from '@/design-system';

// Basic usage with defaults
<ThemeProvider>
  <App />
</ThemeProvider>

// With custom default theme
<ThemeProvider defaultTheme="ocean" defaultMode="dark">
  <App />
</ThemeProvider>

Props

Prop	Type	Default	Description
defaultTheme	string	"default"	Initial theme ID
defaultMode	"light" | "dark" | "system"	"system"	Initial color mode
storageKey	string	"app-theme"	localStorage key prefix

Using the Theme Context

import { useTheme } from '@/design-system';

function MyComponent() {
  const { themeId, mode, colorScheme, setTheme, setMode } = useTheme();

  return (
    <div>
      <p>Current theme: {themeId}</p>
      <p>Mode: {mode}</p>
      <p>Resolved scheme: {colorScheme}</p>
      <button onClick={() => setTheme('ocean')}>
        Use Ocean Theme
      </button>
      <button onClick={() => setMode('dark')}>
        Dark Mode
      </button>
    </div>
  );
}

Available Themes

• default - The standard theme with blue primary colors
• ocean - Cool blue/teal tones
• forest - Natural green tones
• sunset - Warm orange/red tones