Mudar cores de "ícones" ao passar scroll por sessões com fundo diferente

[felquis]

Eai pessoal, estou com uma dúvida de como fazer algo bem especifico no CSS e vou por aqui caso alguém saiba de algo, é um desafio interessante também.

Resultado final

1. A página é dividida em 1 sessão com fundo preto, e outra sessão com fundo branco.
2. Os ícones da imagem abaixo ficam fixos na lateral direita ou esquerda do site.
   
3. Se o ícone está em fundo preto, o ideal é que o ícone tenha cor branca pelo contraste.
4. Se o ícone está em fundo branco, o ideal é que ele fique da cor preta pelo contraste.

Meu primeiro pensamento foi usar position: fixed e no parent esperava que o position: relative fosse o suficiente ocultar o elemento fixo com o overflow hidden, porém não funciona.

Position absolute + clip

Encontrei essa solução no stackoverflow e usa a propriedade clip, porém o parent tem que ser position: absolute.

Por ser position: absolute, ai já viu né, o parent precisa ser posicionado com top para ter o fluxo de scroll do tamanho do conteúdo, um pouco de JavaScript resolveu isso.

Demo1

+

Vou deixar aqui, se vc vê outra forma de fazer o mesmo efeito visual, tiver alguma dica, comenta ai. Obrigado.

[ninetails]

Nesse exemplo em específico (digo bem específico mesmo), e sendo mais específico: somente para navegadores atuais (i.e. not ie), você poderia utilizar o backdrop-filter: invert(1); .

Exemplo: https://css-tricks.com/almanac/properties/b/backdrop-filter/#example

[felquis]

É próximo do que procuro, será que o efeito do backdrop-filter aplica-se ao fill do SVG apenas e não ao background do retângulo do SVG?

[ninetails]

Creio que o backdrop-filter teria que ser uma div que aplicaria a tudo que estivesse "atrás" dele.

Pro caso específico com cores branco e preto, o invert iria trocar preto para branco e branco para preto.