āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/imskyleen/animate-ui/components/buttons/theme-toggler ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<ThemeTogglerButton />
<ExternalLink href="https://animate-ui.com/docs/primitives/effects/theme-toggler#themetoggler" text="Animate UI API Reference - Theme Toggler Primitive" />
<TypeTable type={{ variant: { description: 'The variant of the button.', type: '"default" | "accent" | "destructive" | "outline" | "secondary" | "ghost" | "link"', required: false, default: 'default', }, size: { description: 'The size of the button.', type: '"default" | "sm" | "lg"', required: false, default: 'default', }, modes: { description: 'The modes to toggle.', type: "('light' | 'dark' | 'system')[]", required: false, default: ['light', 'dark'], }, direction: { description: 'The direction to toggle.', type: "'btt' | 'ttb' | 'ltr' | 'rtl'", required: false, default: 'ltr', }, onImmediateChange: { description: 'The function to call when the theme is changed immediately.', type: "(theme: 'light' | 'dark' | 'system') => void", required: false, }, '...props': { description: 'The props for the button.', type: 'React.ComponentProps<"button">', required: false, }, }} />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā