Inverting cursor across black/dark backgrounds

Site URL: https://www.studiofurks.com/work/ciel

Hello,

I wanted to know if there was a way to invert the cursor across black/darker backgrounds.

E.g. on the site URL when you go across the image you lose the ring.. is there a way of making this white when it does go across darker backgrounds?

Thank you.

Code below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <div class="cursor cursor-ring"></div>
    <div class="cursor cursor-bull"></div>
<style>
  @media (hover: none) {.cursor {display:none !important;}}
* {
    cursor: none;
  --cursorcolors: #000000;
}
.cursor {
    --size: 0px;
    height: var(--size);
    width:  var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: 99999999999;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.cursor.cursor-ring {
    background-color: transparent;
    border: 1px solid var(--cursorcolors);
    --size: 10px;
    transition: top .1s, left .1s,
                width .1s, height .1s,
                background-color .1s, border-color 0.2s;
    transition-timing-function: ease-out;
}
.cursor.cursor-bull {
    background: var(--cursorcolors);
    transition: width .2s, height .2s;
}
.cursor-ring.active {
    --size: 20px;
    --cursorcolors: #000000;
    border-color: var(--cursorcolors);
    background-color: var(--cursorcolors);
}
.cursor-bull.active {
      --size: 0;
}
</style>
<script>
    $(window).mousemove(function(e) {     
        $(".cursor").css({
            left: e.pageX,
            top: e.pageY
        })    
    });
    $(window).mousemove(function(e) {
      $("a")
    .on("mouseenter", function() {   
    $('.cursor').addClass("active")   
    })  
    });
    $(window).mousemove(function(e) {
      $("a")
    .on("mouseleave", function() {    
    $('.cursor').removeClass("active")    
    })
    });
  </script>

Hi. Have you solved this yet?

@tuanphan I haven't sadly.