Javascript 更改卷轴上的主题颜色

我正在尝试实现一个解决方案，当您滚动浏览我的站点的各个部分时

<section>
</section>

---

然而，我不确定从这里走到哪里。我希望你们能帮助我，谢谢。

下面的代码实现了这一点：

css:

html:

---

你试过鼠标悬停吗？没有，这是用于移动站点的。

<meta name="theme-color" content="#535353">

document.querySelector('meta[name="theme-color"]').setAttribute('content',  '#535353');

section {
  height: 100vh;
  display: block;
}

  <section data-theme-color="red">
    <p>sesction conent</p>
  </section>
  <section data-theme-color="green">
    <p>sesction conent</p>
  </section>
  <section data-theme-color="blue">
    <p>sesction conent</p>
  </section>

var theme = document.querySelector('meta[name="theme-color"]'),
  getThemeColor = theme.getAttribute('content'),
  sectionElem = document.getElementsByTagName('section'),
  sectionHeight = sectionElem[0].clientHeight,
  sectionLength = sectionElem.length;

// set color on load
window.onload = () => {
  document.body.style.backgroundColor = theme.getAttribute('content');
}

// set color on 'scroll' event
window.addEventListener('scroll', (e) => {
  var offset = window.pageYOffset,
    sectionIndex = parseInt(offset, "10") % sectionLength,
    sectionColor = document.getElementsByTagName('section')[sectionIndex].getAttribute('data-theme-color'),
    setSectionColor = theme.setAttribute('content', sectionColor);

  document.querySelectorAll('section')[sectionIndex].style.backgroundColor = theme.getAttribute('content');
});