So on my personal website, I had this sidebar fixed while scrolling through the entire page, it contains Fontawesome icons and has embedded links. I want to change the color of these 4 icons from the default color of white that use a class of imp__link--anchor when entering a section with white background to a color I have specified using class dark-theme in CSS. I tried using IntersectionObeserver in JavaScript but it only works on the first icon and my aim is to loop the same process over the 4 icons since I can't use querySelectorAll.

I have 2 white-background sections so I want them to change colors for both sections as I have it only changing on the first section.

Here's the HTML for the icon list

<ul class="imp__link--list">
    <li class="imp__link--wrapper">
      <a href="https://www.linkedin.com/in/hatem-soliman-097872187/" target="_blank">
        <i class="fab fa-linkedin-in imp__link--anchor"></i>
      </a>
    </li>
    <li class="imp__link--wrapper">
      <a href="https://github.com/CodeNKoffee" target="_blank">
        <i class="fab fa-github imp__link--anchor"></i>
      </a>
    </li>
    <li class="imp__link--wrapper">
      <a href="https://www.behance.net/hatemsolifuse" target="_blank">
        <i class="fab fa-behance imp__link--anchor"></i>
      </a>
    </li>
    <li class="imp__link--wrapper">
      <a href="" target="_blank">
        <i class="fas fa-file-pdf imp__link--anchor"></i>
      </a>
    </li>
  </ul>

Here's the CSS part for the icons

.dark-theme {
  color: var(--celestial-black);
  border: 2px solid #1d1d1d;
  border-radius: 50%;
  padding: 8px;
  transition: all 300ms ease;
 }

.imp__link--anchor {
  border: 2px solid #fff;
  border-radius: 50%;
  padding: 8px;
  transition: all 300ms ease;
 }

Here's the JavaScript part

const link = document.querySelector('.imp__link--anchor');
const sections = document.querySelector('.white-sections');

const linkObserverCallback = (watchEntry, linkObserver) => {
  if(!watchEntry[0].isIntersecting) {
    link.classList.remove('dark-theme');
    link.classList.add('imp__link--anchor')
  } else {
    link.classList.remove('imp__link--anchor');
    link.classList.add('dark-theme');
  }
}

const linkObserverOptions = {
  rootMargin: '-110px',
  threshold: 0
}

const linkObserver = new IntersectionObserver(linkObserverCallback, linkObserverOptions);

linkObserver.observe(sections);