Проблема смешивания в режиме различия

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 должен иметь черный цвет и когда кнопки темного режима наложены белыми (такие же, как кнопки пользовательского интерфейса) проблемы с режимом смешивания