Theme Provider Demo

Use the controls below to see mode and theme update live.

Mode selection

Theme list

Status

Mode: light · Theme: light · Light base

Usage Examples

Using ThemeProvider

"use client";

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

export default function App() {
  return (
    <ThemeProvider defaultMode="system">
      <div>App content</div>
    </ThemeProvider>
  );
}

Using the useTheme Hook

"use client";

import { useTheme } from "@/components/theme-provider";

export default function MyComponent() {
  const { mode, theme, isDark, setMode, setTheme } = useTheme();

  return (
    <div>
      <p>Current mode: {mode}</p>
      <p>Current theme: {theme}</p>
      <button onClick={() => setMode("light")}>Light Mode</button>
      <button onClick={() => setMode("dark")}>Dark Mode</button>
      <button onClick={() => setMode("system")}>System Mode</button>
    </div>
  );
}