差异模式下的混合混纺问题

Question

我正在为页面的某个部分创建一个深色主题。因此，我成功地通过按钮更改了颜色，但是我试图实现的结果是，当按钮覆盖文本以在按钮的相反侧转换文本颜色时。我设法解决了一半的问题，但是其中一个按钮有问题，我不知道在哪里。如果您在“黑暗”模式按钮重叠时选中“ UX”文本，则不会将其颜色更改为白色。

我将附加我的代码，这也是指向模拟代码库的链接：https://codepen.io/obsesie/pen/YzqPabW

 <div class="graphic-aplications-page">
    <div class="graphic-application-container">
      <div class="graphic-application-title text-center">Application




        <div class="graphic-aplication-container-flex position-relative d-flex justify-content-center black-background">
          <button class="btn-white circle-btn-left "><span>Light <br> Mode</span></button>
          <div class="light-mode-text  align-self-center">UI </div>
          <div class="picture">
           RAndom IMAGEEEEEE
          </div>
          <div class="light-mode-text  align-self-center">UX </div>
          <button class="btn-black circle-btn-right "><span>Dark <br> Mode</span</button>

        </div>
      </div>
    </div>

.graphic-aplication-container-flex {
  height: 100vh;
  transition: all 2s ease;
 isolation: isolate;
}
.graphic-application-title {
  font-size: 5vw;
}
.light-mode-text {
  font-size: 13vw;
  mix-blend-mode: difference;
}
.black-background {
  background-color: black;
  transition: all 2s ease;
}

.text-test{   
   color: black!important;
  /* z-index: 999; */
  mix-blend-mode: darken;}


  .light-mode-text{
  color: white;
  
 
}
.color-white{
  color: white;
}
.circle-btn-left {
  position: absolute;
  border-radius: 67px 2000px 2000px 0;
  height: 90vh;
  width: 45vh;
  font-size: 1.5vw;
  left:0;
  background-color: white;
  border: none;


}
.circle-btn-right {
  position: absolute;
  border-radius: 2000px 0 0 2000px;
  height: 90vh;
  width: 45vh;
  right: 0;
  font-size: 1.5vw;
  border: none;
  background-color: black;
 color:white;
  // background-color: blue;
}

    // Dark Theme Efect 
    $(".btn-white").click(function () {
      $(".graphic-aplication-container-flex ").removeClass("black-background");
      $(".light-mode-text ").addClass("text-test");

     
    });
    $(".btn-black").click(function () {
      $(".graphic-aplication-container-flex ").addClass("black-background");
      $(".light-mode-text ").removeClass("text-test");

    
     

    });

您可以在图片中看到，在黑暗模式下UX应该为白色并覆盖黑暗模式按钮，在黑暗模式下UX应该为黑色，并且当覆盖黑暗模式按钮为白色时（与UI按钮相同）