Change images/frames based on the browser's theme
Overview
Framer currently only supports dark and light mode variants for colors, but with this component you'll be able to switch between two connected frames based on the active color theme (dark or light).
It works with images, buttons, illustrations, frames, and more! By default, the component follows the system theme, but when combined with a theme toggle, you can manually switch themes and perfectly align the design elements.
How to use
Remix the site using the button above.
Copy the component to your project.
Connect two frames to the component—either via the property controls panel (right-side) or by dragging the connection dots from the component to the frames.
That's it! The component will automatically switch between the two frames based on the site's active theme.
Notes
The component has a default size of 1x1 pixel, making it virtually invisible until connected to the child frames.
After connecting the framer for the first time to the component, it may not show the right variant. In this case, just switch the theme of Framer a few times (easiest from the bottom toolbar) and it will be good.
Simple text cannot be connected to the component, it has to be a frame. So if you want to use it with texts, just wrap them into a stack and it will work just fine.
To ensure theme consistency on a live site, use a reliable theme-switcher override—this avoids conflicts with system-based defaults.
Overview:
Change images/frames based on the browser's theme
