CSS - Change Background Colour on Scroll Depending on the Background - html

Question

I have some dots (DIVs) lined up which link to each section of a single page website. They're in a fixed position so they scroll down as the user scroll down. However when I get to a section with a lighter background you can't see them, highlighted in the picture below:
What I'd like is for them to remain white but as the user scroll down, for the dots to change to dark grey instead. I do have multiple sections with lighter background so I need the dots to be able to "tell" when they're on a light background.
Is this even possible at all?
My HTML is:
<div class="pagination_dots">
<div class="circle current"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
My CSS is:
.pagination_dots {
position: fixed;
top: 50%;
left: 15px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
z-index: 20;
}
.pagination_dots .circle {
margin-bottom: 14px;
border-radius: 50%;
width: 9px;
height: 9px;
background: #fff;
position: relative;
cursor: pointer;
}
.pagination_dots .circle:after {
content: '';
display: inline-block;
border: 1px solid rgba(196,163,105, 0);
border-radius: 50%;
width: 18px;
height: 18px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s;
}
.pagination_dots .circle:hover:after,
.pagination_dots .circle.current:after {
border: 1px solid rgba(196,163,105, 1);
}

Answer 1

You can use mix-blend-mode CSS -> difference value on the .pagination_dots element
From MDN, the mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
.section {
min-height: 25rem;
}
.section-black {
background: #272526;
}
.section-grey {
background: #F1F1F1;
}
.pagination_dots {
position: fixed;
top: 50%;
left: 15px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
z-index: 20;
mix-blend-mode: difference;
}
.pagination_dots .circle {
margin-bottom: 14px;
border-radius: 50%;
width: 9px;
height: 9px;
background: #fff;
position: relative;
cursor: pointer;
}
.pagination_dots .circle:after {
content: '';
display: inline-block;
border: 1px solid rgba(196, 163, 105, 0);
border-radius: 50%;
width: 18px;
height: 18px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s;
}
.pagination_dots .circle:hover:after,
.pagination_dots .circle.current:after {
border: 1px solid rgba(196, 163, 105, 1);
}
<div class="section section-black">
</div>
<div class="section section-grey">
</div>
<div class="section section-black">
</div>
<div class="pagination_dots">
<div class="circle current"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>