The Theme Variant component makes it easy to build theme-aware content in Framer. You only need to connect two variants and the component automatically shows the correct one based on theme preference or toggle button preference.
It works as a theme variant switch and theme switching component that displays the right layer using automatic theme detection. Whether a visitor changes theme using a toggle, system settings, or browser preference, the component updates instantly without flicker.
This enables true theme adaptive content and dynamic theme content across your site with no manual conditional logic.
Add the Component:Copy and paste Theme Variant into your Framer project.
Create Your Variants:Design two versions of your content - one for light mode and one for dark mode. These can be images, sections, layouts, or full components. This supports any theme-based content or theme-based layer.
Connect Your Designs:Choose your light version into the Light Variant option and your dark version into the Dark Variant option in the property panel. This defines which content should appear for each theme variant display.
Adjust Sizing:Use Width and Height controls:
Fit Content - keeps original size
Fill Container - stretches to available space
Preview in Canvas:Use Canvas Preview to simulate theme variant change while designing.
Publish:Your site will automatically use theme preference detection and display the correct variant.
Pro Tip: Pair it with a theme toggle button to create a complete light/dark mode system.
1. Theme Switcher: https://www.framer.com/marketplace/components/theme-switcher/
2. Mask Theme Toggle: https://www.framer.com/marketplace/components/mask-theme-toggle/
The Theme Variant component includes 5 simple controls for managing conditional theme display and theme based display behavior.
Connect the component, image, or layout for light mode
Supports any Framer layer or component
Connect the content for dark mode
Updates instantly when a theme variant switch is detected
Fit Content: keeps original width
Fill Container: stretches to container width
Fit Content: keeps original height
Fill Container: stretches to container height
Toggle theme while designing
Only affects editor preview, not published site
Zero-flash switching with instant automatic theme detection
Works as a reliable theme switching component
Syncs with system and browser theme preference
Compatible with manual theme toggle buttons
Real-time updates on theme change
Persistent theme memory across navigation
Flexible sizing controls
Production-ready performance
No-code setup with drag-and-drop connections
Cross-browser support
Accessibility-friendly (respects prefers-color-scheme)
Built with TypeScript and optimized rendering
Supports theme aware design, adaptive design in Framer, and theme component change.
Hero Sections: Create dramatic light/dark hero backgrounds with different images, videos, or illustrations that match each theme perfectly.
Product Showcases: Display product images with light backgrounds in light mode and dark backgrounds in dark mode for optimal contrast.
Logo Display: Show your full-color logo in light mode and a white/outlined version in dark mode for consistent branding.
Illustration Variations: Present colorful illustrations in light mode and darker, muted versions in dark mode for visual harmony.
Landing Page Sections: Create alternating sections with different background treatments that automatically adapt to visitor preferences.
Card Designs: Display card components with different shadows, borders, and background colors optimized for each theme.
CTA Sections: Present call-to-action blocks with contrast-optimized designs that drive conversions in any theme.
Navigation Backdrops: Switch between transparent/solid navigation backgrounds based on theme for optimal header visibility.
Testimonial Sections: Display customer quotes with theme-appropriate typography and background treatments.
Made with ❤️ by Soyeb
Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.
Have questions or need a custom Framer component? Reach out at creator.nitso@gmail.com
Soyeb
