Scroll Theme Trigger

Scroll Theme Switcher Smooth light/dark theme transitions based on page scroll — fully compatible with Lenis and Framer’s native theme system.

Scroll Theme Switcher Smooth light/dark theme transitions based on page scroll — fully compatible with Lenis and Framer’s native theme system. Scroll Theme Switcher automatically changes your website’s theme between Light and Dark as users scroll into specific sections of your page. Perfect for storytelling layouts, long-form landing pages, portfolio sites, and high-end interactive experiences. Why this component is different Unlike most scroll-triggered theme solutions, Scroll Theme Switcher works with: Framer’s real theme engine (color styles + prefers-color-scheme) Framer Preview and the published website All smooth-scroll libraries, including Lenis Full UI theming — text, backgrounds, borders, icons, logos, and more No hacks, no broken previews, no hover lag. Key Features Section-based Theme Switching Define any number of sections (by ID) and choose which theme they activate. When a section becomes active, the global theme updates automatically. True Light / Dark Mode Control Fully integrates with Framer’s built-in theming system and any existing Light/Dark toggle you already use. Smooth, Customizable Transitions Fade backgrounds, text, borders, fills, and icons — or disable the fade entirely. Zero-interference Hover States Hover animations remain crisp thanks to built-in logic that excludes buttons, links, inputs, and any element marked with data-theme-no-transition="true". Works Seamlessly with Lenis Uses geometry-based scroll detection (not IntersectionObserver), ensuring reliable behavior even with smooth scrolling enabled. Drop-in, No Setup Code Place the component anywhere on your canvas, define your section IDs, and publish. How It Works Add the Scroll Theme Switcher component to your page Select the sections you want to watch (e.g. hero, features, case studies) Assign Light or Dark to each section As the user scrolls, the active theme updates automatically All theme tokens update instantly — text colors, backgrounds, shadows, illustrations, and any color style with variants. ⚠️ Required Setup: Light & Dark Theme Styles This component relies on Framer’s native theme system . For it to work correctly, you must define both Light and Dark color styles in your project. How to set this up in Framer Open Assets → Styles → Colors Create a color style (for example: Text / Primary) Enable Theme Variants Define values for: Light theme Dark theme Repeat for all colors you want to switch (backgrounds, text, borders, icons, etc.) Once your color styles have Light and Dark variants, the Scroll Theme Switcher will automatically toggle between them as you scroll. If no Dark theme styles are defined, the theme will not visually change. Props & Options Initial Theme Choose the theme applied when the page first loads. Themes (Section List) Add any number of sections: Section ID — the ID of a Frame on your page Theme — Light or Dark Trigger Position Choose where in the viewport the theme should switch (top → middle → bottom). Transition Duration 0–2000ms smooth theme fade. Easing Curve Linear, Ease, Ease-In-Out, Material curve, Overshoot, Bounce, and more. Debug Panel Optional on-canvas panel to help you verify active sections while building. Disable for production. Excluding Elements from Theme Fade If an element shouldn’t animate during theme changes (e.g. CTA buttons or interactive widgets), add: data-theme-no-transition="true"This preserves native hover and active animations without delay. Ideal For Creative Agencies Designers & Studios Product & SaaS Landing Pages Scroll-driven Experiences Portfolios Editorial & Long-form Stories