Theme Toggler · Animate UI

import { useTheme } from 'next-themes';
import {
  ThemeToggler,
  type Resolved,
  type ThemeSelection,
} from '@animate-ui/react/primitives/effects/theme-toggler';

export function ThemeButton() {
  const { theme, resolvedTheme, setTheme } = useTheme();

  return (
    <ThemeToggler
      theme={theme as ThemeSelection}
      resolvedTheme={resolvedTheme as Resolved}
      setTheme={setTheme}
    >
      {({ effective, toggleTheme }) => (
        <button
          onClick={() => toggleTheme(effective === 'dark' ? 'light' : 'dark')}
        >
          {effective === 'dark' ? 'Light mode' : 'Dark mode'}
        </button>
      )}
    </ThemeToggler>
  );
}