根据背景jQuery改变颜色

Question

有没有办法识别徽标背后的背景颜色，并在它上面设置一个暗或亮的类？

我试图在我遇到的问题上做一个草率的假人（我在JS很糟糕）。我的主要想法是根据活动部分的背景颜色在身体上设置一个暗或亮的类。当截面不是全高时，这显然不会很好。当存在具有动态高度的部分时，我的整个想法都会被拆除。

你们有任何想法如何解决这个问题吗？

看看我的小提琴，希望能有更好的理解： https://jsfiddle.net/Bondra/9jqvm6n6/7/

HTML
        <header>
      <div class="logo">
        Logo
      </div>
    </header>

    <div class="wrapper">
      <div id="fullpage">
        <div id="section1" class="section light" data-anchor="secondPage">
          <h1>Content 1</h1>
        </div>
        <div id="section2" class="section dark fp-auto-height" data-anchor="firstPage">
          <h1>Content 2</h1>
        </div>
        <div id="section3" class="section light" data-anchor="secondPage">
          <h1>Content 3</h1>
        </div>
      </div>
    </div>

JS：

      $('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage'],
    menu: '#menu',
    onLeave: function() {
      $('body').toggleClass('dark');
    }
  });

CSS

        h1 {
      text-align: center;
      margin: 0;
    }

    .fp-auto-height.fp-section,
    .fp-auto-height .fp-slide,
    .fp-auto-height .fp-tableCell {
      height: auto !important;
    }

    ol,
    ul {
      list-style: none outside none;
      margin: 0;
      padding: 0;
    }

    header {
      position: absolute;
      left: 50px;
      top: 50px;
      z-index: 2;
    }

    header div {
      border: 2px solid #000;
      padding: 10px;
    }

    .section {
      text-align: center;
    }

    #section1 {
      background-color: #eaeaea;
      color: black;
      text-align: center;
    }

    #section2 {
      background-color: #5E1062;
      color: white;
      padding: 100px 0;
    }

    #section3 {
      background-color: #eaeaea;
    }

    .dark .logo {
      border-color: white;
      color: white;
    }