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

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 >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></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);
}

CodePudding user response：

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 >
</div>
<div >
</div>
<div >
</div>
<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>