Шапка-хамелеон + фон

Фон страницы перетекает между секциями, а шапка сама переключает цвет под светлое/тёмное. Основа сборки Joby.

Скрольте через цветные зоны.

SKYWARD шапка меняет цвет под фон

белая зона

синяя зона

чёрная зона

и снова белая

Код

<nav class="nav" data-chameleon>ЛОГО · меню</nav>
<section data-bg="#ffffff">светлая секция</section>
<section data-bg="#0f6bf0">синяя секция</section>
<section data-bg="#040404">тёмная секция</section>

<style>
body { transition: background-color .9s cubic-bezier(.16,1,.3,1); }
.nav { position: fixed; top: 0; left: 0; right: 0; padding: 16px 24px;
  transition: color .5s; color: #101010; }
html[data-navtheme="dark"] .nav { color: #fff; }
</style>

<script>
function lum(hex) {                       // яркость фона 0..1
  var n = parseInt(hex.slice(1), 16);
  return (0.299*(n>>16 & 255) + 0.587*(n>>8 & 255) + 0.114*(n & 255)) / 255;
}
var io = new IntersectionObserver(function (es) {
  es.forEach(function (e) {
    if (!e.isIntersecting) return;
    var bg = e.target.getAttribute("data-bg");
    document.body.style.backgroundColor = bg;
    document.documentElement.dataset.navtheme = lum(bg) > 0.55 ? "light" : "dark";
  });
}, { rootMargin: "-40% 0px -40% 0px" });
document.querySelectorAll("[data-bg]").forEach(function (el) { io.observe(el); });
</script>

Промпт для ИИ

Сделай шапку-хамелеон как на jobyaviation.com (data-nav-theme): секции размечены data-bg='#цвет'; IntersectionObserver с rootMargin -40%/-40% красит body в цвет секции у центра экрана (transition 0.9s) и считает яркость цвета (0.299R+0.587G+0.114B): если фон тёмный — html получает data-navtheme='dark' и фиксированная шапка становится белой, если светлый — тёмной (transition color 0.5s). Логотип и ссылки наследуют currentColor.