Invert on enter

The whole page switches to a dark theme while a dark section is in the middle of the screen.

How it works

Sections that want a dark page carry data-theme="dark". An IntersectionObserver with a thin band around the screen’s centre reports which section is there, and the body swaps a class. CSS custom properties with transitions do the smooth colour change.

Full file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Invert on enter</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }

body { --bg: #fbf8f3; --fg: #1a1a1a; --accent: #ff5d73; background: var(--bg); color: var(--fg); transition: background .6s, color .6s; }
body.dark { --bg: #101014; --fg: #f1f1f1; --accent: #7cffcb; }
section { min-height: 100vh; display: grid; place-content: center; text-align: center; padding: 0 8vw; }
section h2 { font: 900 clamp(3rem, 12vw, 8rem)/1 system-ui, sans-serif; letter-spacing: -.05em; margin: 0 0 .2em; color: var(--accent); transition: color .6s; }
section p { font-size: 1.3rem; margin: 0; }
</style>
</head>
<body>
<section><h2>Light</h2><p>A calm, bright page.</p></section>
<section data-theme="dark"><h2>Dark</h2><p>The whole page follows this section.</p></section>
<section><h2>Light again</h2><p>And back.</p></section>
<section data-theme="dark"><h2>Night mode</h2><p>Every element uses the same two variables.</p></section>
<section><h2>Morning</h2><p>That’s the trick.</p></section>
<script>
const io = new IntersectionObserver(entries => entries.forEach(e => {
  if (e.isIntersecting) document.body.classList.toggle('dark', e.target.dataset.theme === 'dark');
}), { rootMargin: '-50% 0px -50% 0px' });
document.querySelectorAll('section').forEach(s => io.observe(s));
</script>
</body>
</html>

More color effects