Search bar dynamic light/dark mode

Hello all !! I followed this tutorial on how to place a search bar in the header. (https://www.will-myers.com/articles/adding-a-search-bar-to-your-header-in-squarespace-71). When you visit the homepage, the text and search are both black. When you go to the Accessibility/Terms of Use/Privacy Policy pages, the text is white but the search bar is still black (because the background is dark and the text is dynamic). What code do I need to make the search bar dynamic with the background so it'll automatically change from black to white if it's dark.

Here's the website link: https://www.everythingplants.online/

Below are the codes I'm using:

HTML

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(function(){
  let searchBlock = $('#block-yui_3_17_2_1_1694223776832_20726');
  $(searchBlock).insertAfter($('.header-title-nav-wrapper'));
})
  </script>
<script>
$(function(){
  let searchBlock = $('#BLOCK-ID-HERE').addClass('header-search-bar');
  $(searchBlock).insertAfter($('.header-title-nav-wrapper'));
  })
  </script>
<script>
$(function(){
  let searchBlock = $('#BLOCK-ID-HERE').attr('id','').addClass('header-search-bar');

 $(searchBlock).insertAfter($('.header-title-nav-wrapper'));
  $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('.header-menu-nav-folder-content'));
  })
  </script>

CSS

.header-search-bar{
  margin: 0 0 0 2.5vw;
}
.header-search-bar{
  margin: 0 0 0 2.5vw;
  @media(max-width:799px){
    display:none;
    margin: 0 0 0 0vw;
  }
}
.mobile-header-search-bar{
  display:block;
  padding-left:3vw;
  padding-right:3vw;
  .preScale{
    opacity:1 !important;
  }
}

With pages where you have problem, you can add to Page Settings > Advanced > Code Injection to change search color on these page only

<style>
  .sqs-search-ui-button-wrapper .search-input {
    filter: invert(1);
    opacity: 1 !important;
    border-color: white !important;
}
</style>