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.
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.
Define any number of sections (by ID) and choose which theme they activate. When a section becomes active, the global theme updates automatically.
Fully integrates with Framer’s built-in theming system and any existing Light/Dark toggle you already use.
Fade backgrounds, text, borders, fills, and icons — or disable the fade entirely.
Hover animations remain crisp thanks to built-in logic that excludes buttons, links, inputs, and any element marked with data-theme-no-transition="true".
Uses geometry-based scroll detection (not IntersectionObserver), ensuring reliable behavior even with smooth scrolling enabled.
Place the component anywhere on your canvas, define your section IDs, and publish.
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.
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.
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.
Choose the theme applied when the page first loads.
Add any number of sections:
Section ID — the ID of a Frame on your page
Theme — Light or Dark
Choose where in the viewport the theme should switch (top → middle → bottom).
0–2000ms smooth theme fade.
Linear, Ease, Ease-In-Out, Material curve, Overshoot, Bounce, and more.
Optional on-canvas panel to help you verify active sections while building. Disable for production.
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.
Creative Agencies
Designers & Studios
Product & SaaS Landing Pages
Scroll-driven Experiences
Portfolios
Editorial & Long-form Stories
