Scroll Direction Theme Shift — Free Direction-Aware Color Theme Effect

Most "scroll-aware" theme effects only check one thing: has the user scrolled past some threshold, usually near the top of the page. This snippet checks something different and more genuinely direction-aware — which way the user is currently scrolling, determined fresh on every scroll event by comparing the current position against the previous one. Scroll down anywhere on the page and the accent colors shift to a cyan/indigo palette; scroll up from anywhere — not just near the top — and it shifts to a distinct pink/amber palette instead. Built entirely in vanilla JavaScript with CSS custom properties.

Comparing consecutive positions, not absolute position

The core of the effect is four lines: read window.scrollY, subtract the value recorded on the previous scroll event, and the sign of that difference is the direction. This is fundamentally different from checking scrollY > 100 or scrollY === 0 — those only know *where* you are on the page, not *which way* you're currently moving. A user paused halfway down the page could be about to scroll either direction; only comparing consecutive reads reveals which.

A deadband against jitter

Trackpads, certain mice, and even some scroll-restoration behaviors can fire scroll events with a pixel or two of noise even when the page is visually still. A small DEADBAND of 2px means deltas smaller than that are ignored entirely rather than treated as a direction change, so the theme doesn't flicker between states when nothing meaningful is happening.

CSS custom properties as the single source of truth

Rather than toggling many individual color declarations, the direction handler writes four CSS custom properties (--dt-accent, --dt-accent-2, --dt-bg, --dt-bg-2) on the root element, and every colored element in the CSS simply references those variables with a transition. Changing direction is then just four setProperty calls, and the whole page's palette cross-fades together via CSS transitions with no JavaScript animation loop needed.

Direction only changes state when it flips

The handler tracks the last known direction string and only calls applyTheme when the newly computed direction actually differs from it — so hundreds of consecutive "still scrolling down" events don't re-trigger the same transition repeatedly; only the moment of reversal does.

Customizing it

Add a third, more neutral theme for "scroll velocity near zero" using the deadband window, tie the shift to a background gradient position instead of flat colors, or apply it per-section instead of globally. Pair it with scroll color sections for position-driven color, or a dark mode toggle for manual theme control.