āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/imskyleen/animate-ui/primitives/effects/theme-toggler ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<ThemeToggler>
{({ effective, toggleTheme }) => (
<button onClick={() => toggleTheme(nextTheme)}>
{effective === 'system' ? (
<Monitor />
) : effective === 'dark' ? (
<Moon />
) : (
<Sun />
)}
</button>
)}
</ThemeToggler>
<TypeTable type={{ theme: { description: 'The theme to toggle.', type: "'light' | 'dark' | 'system'", required: true, }, resolvedTheme: { description: 'The resolved theme.', type: "'light' | 'dark'", required: true, }, setTheme: { description: 'The function to set the theme.', type: "(theme: 'light' | 'dark' | 'system') => void", required: true, }, direction: { description: 'The direction to toggle.', type: "'btt' | 'ttb' | 'ltr' | 'rtl'", required: false, default: 'ltr', }, children: { description: 'The children to render.', type: 'React.ReactNode | ((state: { resolved: "light" | "dark"; effective: "light" | "dark" | "system"; toggleTheme: (theme: "light" | "dark" | "system") => void }) => React.ReactNode)', required: false, }, onImmediateChange: { description: 'The function to call when the theme is changed immediately.', type: "(theme: 'light' | 'dark' | 'system') => void", required: false, }, }} />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā