A premium theme switch that delights while clearly communicating state. The thumb morphs between sun and moon, the track shifts from warm daylight to cool night, and subtle stars/particles fade in with depth-aware parallax. Built for real apps: accessible, high-performance, and fully themeable—perfect for toggling light/dark or any dual visual mode.
Functionality
-
Morphing sun ↔ moon thumb with spring physics, glow, and shadow elevation
-
Track color transitions (daylight → twilight → night), optional gradient and vignette
-
Particles/stars with fade/scale and parallax tied to drag progress
-
Tap/drag interaction, ripple and haptic feedback, hover/pressed focus states
-
Modes: on/off, disabled, loading (async guard with spinner/lock), scheduled/auto (system follow)
-
Persistence: saves preference (local storage) and/or syncs with OS theme
-
Theming tokens: radius, sizes (XS–XL), palette for day/night, icon sets (SVG/Lottie), glow intensity
-
Accessibility: ARIA
switch
, screen-reader labels, Tab/Space/Enter keys, RTL & Reduce Motion -
Performance: GPU-friendly animations, layer caching, butter-smooth 60fps even in lists
Use cases
-
Global Light/Dark theme toggle in settings or app bars
-
Reading modes (Day/Night), map/navigation Night Mode, video/photo editor themes
-
“Power Saver” or “Eye Comfort” modes with distinct palettes
-
Marketing/landing pages needing a delightful yet functional theme control
-
Multi-brand or seasonal skins (e.g., Summer/Winter) with custom icons and colors
Keywords
theme toggle, dark mode switch, day night switch, animated toggle, sun moon morph, stars particles, parallax, gradient track, spring animation, haptic feedback, ARIA switch, accessibility, keyboard navigation, reduce motion, RTL, persistence, follow system theme, async guard, loading state, theming tokens, Flutter widget, FlutterFlow component, high performance, modern UI.
Advanced Toggle Switch Kit V3
- Fixed price & scope
- Pixel-perfect UI/UX
- App Store & Google Play submission
You may only use this template for one project. For more details, please read the Marketplace Terms of Service.