如何使用滑动器更改不同幻灯片上的页眉和分页颜色？

Question

我将swiper API用于全屏滑块。我想根据滑块背景更改导航颜色和分页颜色。如果背景较暗，则导航和分页为白色。反之亦然。

https://www.ramotion.com/agency

https://codepen.io/Ebo/pen/XQpror

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide dark">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-6 text-left">
            <h4>Featured</h4>
            <h1>Designing a new<br> dimension of<br> Test</h1>
            <div>
              <a href="#" class="btn button" role="button" aria-pressed="true">Full project</a>
            </div>
          </div>
          <div class="col-12 col-md-6">
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide white">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-6 text-left">
            <h4>Featured</h4>
            <h1>Designing a new<br> dimension of<br> Test</h1>
            <div>
              <a href="#" class="btn button" role="button" aria-pressed="true">Full project</a>
            </div>
          </div>
          <div class="col-12 col-md-6">
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide red">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-6 text-left">
            <h4>Featured</h4>
            <h1>Designing a new<br> dimension of<br> Test</h1>
            <div>
              <a href="#" class="btn button" role="button" aria-pressed="true">Full project</a>
            </div>
          </div>
          <div class="col-12 col-md-6">
          </div>
        </div>
      </div>
    </div>