Component

ThemeProvider / useTheme

Context provider that reads and persists the user's light/dark theme preference. Wrap the app root and consume with useTheme().

Setup — wrap the root layout

live editor — edit to update preview
// app/layout.tsx
import { ThemeProvider } from "@ann/ui";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

Consume theme in a component

live editor — edit to update preview
"use client";
import { useTheme } from "@ann/ui";

export function ThemeToggle() {
  const { theme, toggle } = useTheme();
  return (
    <button onClick={toggle}>
      {theme === "dark" ? "Switch to light" : "Switch to dark"}
    </button>
  );
}

Props

PropTypeDefaultDescription
children*ReactNode—App subtree that needs theme access.

useTheme() return value

Props

PropTypeDefaultDescription
theme"light" | "dark"—Current active theme.
toggle() => void—Switches between light and dark and persists the choice to localStorage.