Framer is incredible for native light and dark mode handling when it comes to colors and text styles. But as soon as you need to switch out a graphic, asset, or logo based on the active theme, you run into a wall—Framer simply doesn't support theme-specific image toggles out of the box.
This component fills that exact gap. It automates the entire process, swapping your brand's assets instantly based on the user's active theme, while giving you full design control directly from the sidebar.
⚠️ Important Note: To unlock the full potential of this component, make sure to pair it with the free "Theme Toggle PLUS" component in your project. This switcher is specifically engineered to listen to the custom events triggered by "Theme Toggle PLUS", ensuring your logos swap instantly and perfectly in sync with your theme switch button!https://www.framer.com/marketplace/components/theme-toggle-plus/
The component utilizes an optimized MutationObserver and event listeners to detect theme changes the exact millisecond they happen. Whether a user toggles a dark mode switch on your site or changes their system-wide preferences, the logo swaps instantly with zero layout shift and no visual delay.
You don't need to touch a single line of code. All styling options are exposed directly within the right-hand sidebar interface:
Dual Logo Slots: Dedicated inputs for your light and dark logo variations (supports SVGs, PNGs, and WebPs).
Smart Fallbacks: If you only upload one logo variant, the component automatically uses it across both themes, preventing broken image placeholders.
SEO & Accessibility: Includes a native input field for alt text to keep your website accessible to screen readers and fully optimized for image SEO.
Achieve perfect alignment with your design system using integrated container controls:
Corner Radius: Smoothly adjust the container's roundness from hard edges (0px) to completely circular pills (100px).
Border Customization: Configure the border width, select from multiple styles (Solid, Dashed, Dotted), and pick a custom color via the native Framer color wheel.
Layout Safeguards: Powered by box-sizing: border-box and overflow: hidden, the component guarantees that your borders never distort element dimensions and your logo assets never clip past rounded corners.
Turn your logo into a functional navigation element with a single click. The built-in URL option automatically wraps the component in a secure, performance-ready anchor tag (target="_blank", rel="noopener noreferrer"), making it perfect for main navigation bars or external links.
Engineered strictly following React and Framer best practices, the component features a robust dual-pass hydration strategy. By deferring local storage and DOM attribute checks to the client-side lifecycle (useEffect), it entirely eliminates server-side rendering (SSR) hydration mismatches. This ensures your site benefits from fast loading times, clean HTML source code, and optimal search engine indexation.
