useTheme

The useTheme hook provides access to the theme context, allowing you to read and update the current theme. It must be used within a ThemeProvider component.

Overview

useTheme returns an object with the current theme, resolved theme, and a function to set the theme. The resolved theme resolves "system" to either "light" or "dark" based on the user's system preferences.

Usage

Basic Usage

import { useTheme } from "@pipecat-ai/voice-ui-kit";

function ThemeToggle() {
  const { theme, resolvedTheme, setTheme } = useTheme();
  
  return (
    <div>
      <p>Current theme: {theme}</p>
      <p>Resolved theme: {resolvedTheme}</p>
      <button onClick={() => setTheme("light")}>Light</button>
      <button onClick={() => setTheme("dark")}>Dark</button>
      <button onClick={() => setTheme("system")}>System</button>
    </div>
  );
}

Theme Toggle Component

import { useTheme } from "@pipecat-ai/voice-ui-kit";
import { Button } from "@pipecat-ai/voice-ui-kit";

function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  
  return (
    <Button
      onClick={() => {
        if (theme === "dark") {
          setTheme("light");
        } else if (theme === "light") {
          setTheme("dark");
        } else {
          setTheme("dark");
        }
      }}
    >
      Toggle Theme
    </Button>
  );
}

Custom Theme

import { useTheme } from "@pipecat-ai/voice-ui-kit";

function CustomThemeSelector() {
  const { theme, setTheme } = useTheme();
  
  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      <option value="system">System</option>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
      <option value="terminal">Terminal</option>
    </select>
  );
}

Return Value

The hook returns an object with the following properties:

Prop	Type	Default
`theme`	`Theme`	-
`resolvedTheme`	`Theme`	-
`setTheme`	`(theme: Theme) => void`	-

Theme Type

The Theme type is defined as:

type Theme = "system" | (string & {});

This allows:

"system" - Use system preference
"light" - Light theme
"dark" - Dark theme
Any custom string - Custom theme name

Resolved Theme

When theme is set to "system", the resolvedTheme will be:

"light" if the system prefers light mode
"dark" if the system prefers dark mode

For all other theme values, resolvedTheme matches theme.

Integration

The useTheme hook:

Must be used within a ThemeProvider component
Throws an error if used outside of a ThemeProvider
Automatically updates when the theme changes
Respects system theme preferences when theme is "system"

Example: Theme Toggle Button

import { useTheme } from "@pipecat-ai/voice-ui-kit";
import { Button } from "@pipecat-ai/voice-ui-kit";
import { MoonIcon, SunIcon } from "lucide-react";

function ThemeToggle() {
  const { resolvedTheme, setTheme } = useTheme();
  
  return (
    <Button
      variant="ghost"
      isIcon
      onClick={() => {
        setTheme(resolvedTheme === "dark" ? "light" : "dark");
      }}
    >
      {resolvedTheme === "dark" ? <SunIcon /> : <MoonIcon />}
    </Button>
  );
}