Framer Component

Dark / Light Variants

Display a different layer or component variant for dark and light themes.

Access over 60 components for building websites!
No subscription - pay once, use forever.


Code Component



Last Updated

May 17, 2024



Copy and paste the component into your Framer project and use the property controls on the right side to customize and configure it for your website.

Create layers for dark and light theme outside of the page breakpoint, then use the handle on the right side of the component to connect them or select from the dropdown list.

This component may not always show the correct variant in the Framer web editor. However, it always displays the correct image on published websites and on the Framer desktop app.