<div id="viewport">
  <section class="section one"></section>
  <section class="section two"></section>
  <section class="section three"></section>
  <section class="section four"></section>
  <section class="section five"></section>
</div>

#viewport {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
}
.section {
  height: 90vh;
  min-height: 500px;
}
.one {
  background-color: salmon;
}
.two {
  background-color: mediumseagreen;
}
.three {
  background-color: palevioletred;
}
.four {
  background-color: lightblue;
}
.five {
  background-color: rebeccapurple;
}

const setThemeColor = (color) => {
  const meta = document.querySelector('meta[name="theme-color"]')
  if (meta) {
    meta.setAttribute('content', color)
  }
}

if ("IntersectionObserver" in window) {
  const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        const { isIntersecting, target } = entry
        if (isIntersecting) {
          const color = window.getComputedStyle(target).getPropertyValue("background-color");
          setThemeColor(color)
        }
      })
  }, {
    root: document.getElementById('viewport'),
    rootMargin: "1px 0px -100% 0px",
    treshold: 0.1
  })
  
  document.querySelectorAll('.section').forEach(section => {
    observer.observe(section)
  })
}