About 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 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
