ThemeToggler

Purpose

ThemeToggler provides a compact theme selector with:

• Light, dark, and system options
• Animated selection indicator
• Multiple size variants

When to use

Use ThemeToggler for:

• Settings pages
• Header/footer theme controls
• User preference panels

Basic usage

import ThemeToggler from '@/shared/ui/components/ThemeToggler'

<ThemeToggler />

With size variant

<ThemeToggler size="sm" />
<ThemeToggler size="md" />
<ThemeToggler size="lg" />

Props

Prop	Type	Default	Description
size	'sm' | 'md' | 'lg'	'md'	Size variant
className	string	-	Additional class

Notes

• Uses useTheme hook from ThemeProvider
• Built on NavRail for consistent styling
• Icons: Sun (light), Moon (dark), Monitor (system)
• Theme preference is persisted automatically