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

1. Add the Scroll Theme Switcher component to your page
2. Select the sections you want to watch (e.g. hero, features, case studies)
3. Assign Light or Dark to each section
4. 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

1. Open Assets → Styles → Colors
2. Create a color style (for example: Text / Primary)
3. Enable Theme Variants
4. Define values for:
   • Light theme
   • Dark theme
5. 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