Section Theme System

Scroll-based theme transitions using IntersectionObserver. Each section can declare its own theme, and the page background/foreground smoothly transitions as sections enter the viewport.

↓ Scroll to see transitions

dark Theme

--background: oklch(0.145 0 0)

--foreground: oklch(0.985 0 0)

light Theme

--background: oklch(0.985 0 0)

--foreground: oklch(0.145 0 0)

red light Theme

--background: oklch(66% 0.23 35)

--foreground: oklch(0.145 0 0)

green light Theme

--background: oklch(85% 0.25 150)

--foreground: oklch(0.145 0 0)

Back to Dark

Demonstrates "sticky" behavior - when scrolling between sections, the theme doesn't flash to default. It only changes when a new section reaches the threshold.

Configuration

  • threshold: 0.5 (section must be 50% visible)
  • debounceMs: 100ms
  • duration: 0.8s (0.15s with reduced motion)
  • easing: cubic-bezier(0.22, 1, 0.44, 1)

Features

  • • IntersectionObserver with multiple thresholds [0, 0.25, 0.5, 0.75, 1]
  • • Sticky behavior prevents flashing between consecutive sections
  • • Navbar adapts via mix-blend-difference
  • • Respects prefers-reduced-motion
  • • CSS variables update on <html> element