Gods of code i need help. How to change logo + burguer color as i scroll in my homepage (dif. color for different sections)

Good morning,
In the first place let me thank you in advance for your help.

I'm making a website and I have the homepage practically ready (only mobile yet) but I'm having trouble changing the color of the header items (logo, burger). 

What I want to do is make the colors change when I scroll through the homepage, depending on the theme of the section (check image).

For some reason writing ".light" ".black" whatever doesn't trigger anything.

www.oak35.com/homepage (check on mobile)

Thanks!

.light header#header img {
  content: url(//images.squarespace-cdn.com/content/v1/65a6654f64932547f4cbac64/c1573739-7fb2-426a-8da2-f78b87f41936/logo_transp_darkgrey.png);
}

.black header#header img {
  content: url(//images.squarespace-cdn.com/content/v1/65a6654f64932547f4cbac64/d51ec273-199a-4394-b44c-f4e64b157b01/logo_transp_white.png);
}

.light .burger-inner.header-menu-icon-doubleLineHamburger .top-bun {
  background-color: #2A282F !important;
}

.black .burger-inner.header-menu-icon-doubleLineHamburger .top-bun {
  background-color: #FFFFFF !important;
}

.light .burger-inner.header-menu-icon-doubleLineHamburger .bottom-bun {
  background-color: #2A282F !important;
}

.black .burger-inner.header-menu-icon-doubleLineHamburger .bottom-bun {
  background-color: #FFFFFF !important;
}

It's not something that can be done just with css.

It requires javascript. An intersection observer would trigger a function when the header passes over each section. The function would modify the colours of the header based on whatever rules you decide upon. 

Hi, 

I know this only accounts for some of what you are looking for, but we got this code to work so our logo changes depending on the theme color of the header.

It's only CSS, we are not using any code injection.

//* CHANGE LOGO DEPENDING ON THEME *//
[data-header-theme=""],.bright,.dark, .darkest, .black {
  &.header .header-title-logo a {
    content: url('INSERT IMAGE URL');
    block-size: 50px;
  }
  &.header .header-mobile-logo a {
    content: url('INSERT IMAGE URL');
    block-size: 30px;
  }
}

The "block-size" is to force the new logo to a certain size so it matches the original.

Hope this can help you 🙂