Theme Toggler Button

1'use client';
2 
3import * as React from 'react';
4import { useTheme } from 'next-themes';
5import { Monitor, Moon, Sun } from 'lucide-react';
6import { VariantProps } from 'class-variance-authority';
7 
8import {
9  ThemeToggler as ThemeTogglerPrimitive,
10  type ThemeTogglerProps as ThemeTogglerPrimitiveProps,
11  type ThemeSelection,
12  type Resolved,
13} from '@/components/animate-ui/primitives/effects/theme-toggler';
14import { buttonVariants } from '@/components/animate-ui/components/buttons/icon';
15import { cn } from '@/lib/utils';
16 
17const getIcon = (
18  effective: ThemeSelection,
19  resolved: Resolved,
20  modes: ThemeSelection[],
21) => {
22  const theme = modes.includes('system') ? effective : resolved;
23  return theme === 'system' ? (
24    <Monitor />
25  ) : theme === 'dark' ? (
26    <Moon />
27  ) : (
28    <Sun />
29  );
30};
31 
32const getNextTheme = (
33  effective: ThemeSelection,
34  modes: ThemeSelection[],
35): ThemeSelection => {
36  const i = modes.indexOf(effective);
37  if (i === -1) return modes[0];
38  return modes[(i + 1) % modes.length];
39};
40 
41type ThemeTogglerButtonProps = React.ComponentProps<'button'> &
42  VariantProps<typeof buttonVariants> & {
43    modes?: ThemeSelection[];
44    onImmediateChange?: ThemeTogglerPrimitiveProps['onImmediateChange'];
45    direction?: ThemeTogglerPrimitiveProps['direction'];
46  };
47 
48function ThemeTogglerButton({
49  variant = 'default',
50  size = 'default',
51  modes = ['light', 'dark', 'system'],
52  direction = 'ltr',
53  onImmediateChange,
54  onClick,
55  className,
56  ...props
57}: ThemeTogglerButtonProps) {
58  const { theme, resolvedTheme, setTheme } = useTheme();
59 
60  return (
61    <ThemeTogglerPrimitive
62      theme={theme as ThemeSelection}
63      resolvedTheme={resolvedTheme as Resolved}
64      setTheme={setTheme}
65      direction={direction}
66      onImmediateChange={onImmediateChange}
67    >
68      {({ effective, resolved, toggleTheme }) => (
69        <button
70          data-slot="theme-toggler-button"
71          className={cn(buttonVariants({ variant, size, className }))}
72          onClick={(e) => {
73            onClick?.(e);
74            toggleTheme(getNextTheme(effective, modes));
75          }}
76          {...props}
77        >
78          {getIcon(effective, resolved, modes)}
79        </button>
80      )}
81    </ThemeTogglerPrimitive>
82  );
83}
84 
85export { ThemeTogglerButton, type ThemeTogglerButtonProps };