Dark Mode getting messed up with intersectionObserver

I've been working on a site and I decided to add a dark mode feature to it, I used the darkmode.js library to implement it , the library works on the principle of mix-blend-mode: difference. However, when I add a scroll animation to it using IntersectionObserver, and have the dark mode enabled, the div which is supposed to appear turns white and then immediately turns black. Yeah, it may seem very complicated, So

Here's my code

const targets = document.querySelectorAll('.animate');
const options = {
  threshold: 0.7
}

const lazyLoad = target => {
  const io = new IntersectionObserver((entries, observer) => {
    console.log(entries)
    entries.forEach(entry => {
      console.log('😍');

      if (entry.isIntersecting) {
        const img = entry.target;
        img.classList.add('fade');
        observer.disconnect();
      }
    }, options)
  }, options);

  io.observe(target)
};

targets.forEach(lazyLoad);

.quotes-layout {
	margin-top: 50px;
	display: flex;
	justify-content: center;
	margin-left: 10%;
	margin-right: 10%;
}

.quote {
	flex: 1;
	margin-right: 20px;
	text-align: left;
	background: #eee;
	padding: 20px 20px;
}

.quote svg {
	fill: rgba(0,0,0,0.5);
}

.quote .content::first-letter {
	font-size: 23px;
}

.quote .content::first-line {
	line-height: 16px;
}

<div class="quotes-layout">
    <div class="quote">
        <div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg></div>
        <div class="content">
            <p>An eye for an eye ends up making the whole world blind.</p>
        </div>
    </div>
    <div class="quote">
        <div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg></div>
        <div class="content">
            <p>The future depends on what you do today.</p>
        </div>
    </div>
    <div class="quote">
        <div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg></div>
        <div class="content">
            <p>There is more to life than increasing its speed.</p>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>

Recommended topics

Hot tags