How to add an underline swipe that changes colour according to the theme of the first section on a given page

Hello everyone, 

I would like some help with CSS for my website. 

I am using a code that was generated through ChatGPT to add a swiping underline when hovering over a header element. Right now it only generates it in black. But if you navigate through the website some of the sections are dark and that changes the header setting from black to white (including my logo). I would like the swiping underline to also change to white where the first section is displayed in dark mode. Here is the code to create the swiping underline. 

/* Add swipe animation to the underline */
.header-nav a::before {
  content: '';
  position: absolute;
  bottom: -1px; /* Adjust this value to position the underline */
  left: 0;
  width: 0;
  height: 2px; /* Adjust this value for the underline thickness */
  background-color: black; /* Adjust this value for the underline color */
  transition: width 0.3s ease; /* Animation duration and timing function */
}

/* Trigger animation on hover */
.header-nav a:hover::before {
  width: 100%;
}

If somebody could help adding a command that has it change according to the theme of the first section of the page it's on then I would be very grateful. 

Cheers!

I would like to further add that I have done the white and dark inversion by changing the header colour setting to "Dynamic" and the logo changes colour because I have added a small block of code on all the "dark" pages that inverts it. I do not have the premium or business plans so I am not able to do code injections. Rather I just add a code block onto a section and paste my code in there.

I don't know if this if this is relevant information, I am just sharing it for clarity so if you help in writing this code then you have the full picture of whats going on behind the scenes. 

Hi,

What is your site url? We can check problem easier

Hello, 

Here's the link to my site: https://clover-snail-helr.squarespace.com 

Many thanks

Try something like: 

.light, .light-bold, .white, .white-bold {.header-nav a::before {
  content: '';
  position: absolute;
  bottom: -1px; /* Adjust this value to position the underline */
  left: 0;
  width: 0;
  height: 2px; /* Adjust this value for the underline thickness */
  background-color: #000; /* Adjust this value for the underline color */
  transition: width 0.3s ease; /* Animation duration and timing function */
}
}

.dark, .dark-bold, .black, .black-bold {.header-nav a::before {
  content: '';
  position: absolute;
  bottom: -1px; /* Adjust this value to position the underline */
  left: 0;
  width: 0;
  height: 2px; /* Adjust this value for the underline thickness */
  background-color: #fff; /* Adjust this value for the underline color */
  transition: width 0.3s ease; /* Animation duration and timing function */
}
}
/* Trigger animation on hover */
.header-nav a:hover::before {
  width: 100%;
}