About this plugin
Scroll into a section and the page changes its colors – background, headings, body text, buttons, borders, icons, all together, like the lights dimming in a room. The same mechanism doubles as a real dark mode for Elementor: drop in the toggle widget and visitors switch between two palettes you designed, not one a filter guessed by inverting your site.
It works by extending something you already use. Every Global Color in Site Settings gets a second “Alt” swatch next to it – the same color picker, one row, no new screen. Fill it in for the colors that should change, mark the sections that should switch on scroll, place the toggle where visitors should find it.
And there’s no Pro version: this is the whole thing.
Two things to know before you install. This changes what your visitors see – it is not a dark skin for wp-admin. And it turns the colors you linked to Global Colors: that linkage is the whole mechanism, so a hex typed straight into a widget stays where it is.
Sites built the way Elementor intends have little to do; sites full of hand-typed colors have some linking to do first.
Nothing to rebuild
Your widgets already reference Global Colors. That’s the entire integration – the plugin re-points those same colors, so anything linked to them turns automatically, including sections you never touched. A color with no Alt value keeps its original, which means you can adopt this on an existing site one color at a time.
Change colors on scroll
A marked section shows the alternative palette while it is on screen, and the page returns to its own palette by itself once the section has passed – nothing has to be marked as “the normal one”.
One control decides where that happens: a range over the viewport with two handles. Put both handles together and the switch is instant; move them apart and the colors interpolate continuously with scroll position across that band. The default – both at the top – turns the page once the section has scrolled up to fill the screen, the way it reads in the portfolio themes this effect comes from.
A section holds the page for as long as its own height, so sections shorter than the screen want their handles moved down. Whether a section switches at all is per-device, so an effect can run on desktop and stay off on phones.
Works inside horizontal scroll sections
A section pinned by Arts Horizontal Scroll travels sideways while its vertical position stands still, so marking one of its panels works the way you would expect. The Viewport control keeps its meaning too – it just reads across the screen instead of down it: how far the panel travels before the colors change.
A dark mode toggle, four shapes
Drop the Color Switcher widget anywhere – or use the [arts_color_switcher_toggle] shortcode in a menu or footer – and visitors pick a side: an icon, a switch, a row of buttons, or a dropdown. Their choice is remembered, and it travels with them from page to page.
Everything but the switch can offer two states or three, and the third is “follow the system”: a visitor who picks it keeps tracking their device’s light and dark setting for as long as they leave it there – change the system setting and the site changes with it. Two states can still be undone: press once to pin a palette, press again to release it, and the visitor ends up exactly where they started, which a toggle that can only ever store a choice cannot do.
Dark pages, light pages, or follow the device
Each page opens one of three ways, set under Page Settings. Left alone, it follows the visitor’s device – the same dark mode setting their phone binds to their own sunrise and sunset. Or you can pin it: Default colors for a page that must stay light for everyone, Alt colors for one that must start dark.
A pinned page is rendered server-side, so there is no flash of the wrong colors and it works with JavaScript disabled.
A marked section always shows the opposite of whatever the page starts in, so on a dark page the marked sections are the light interludes. That holds for a visitor whose device turned the page dark too – the contrast survives wherever the page begins.
Dark mode logos and images
Color is only half of a dark page. A logo drawn for a light background disappears on a dark one, and no palette can rescue it – that needs a different file.
So every image control grows a second picker. Open the image you already chose and there is a “Choose Alt Image” button beside it: point it at the white version of your logo and that version appears whenever the alternative palette is on. Background images work the same way – a section’s, a widget’s, and the hover state of either.
Nothing moves to a new screen, and an image without an Alt simply keeps what it has.
Built on modern CSS
Colors interpolate in the OKLab color space through CSS custom properties, so midpoints look right instead of muddy. Scroll-bound switching uses native CSS scroll-driven animations where the browser supports them – no JavaScript runs per frame – and falls back to a scroll-timeline polyfill in Firefox. The editor shows the real thing: scroll the canvas and the colors turn exactly as they do on the frontend.
In browsers with customizable selects (Chrome, Edge), the Dropdown toggle’s options open as a styled, animated list you can design from the widget; everywhere else the platform’s own picker keeps working.