Inverter cores usando CSS

Ultimamente, tenho sido obcecado por encontrar propriedades e valores de CSS novos ou menos conhecidos e brincar com eles. Alguns deles são bastante úteis e outros aparentemente servem apenas para dar risada. Filtros CSS se enquadram no departamento de utilidade: grayscale, blur, sepia — todos filtros comuns. Mas e quanto ao invert? E o senhor sabia que pode inverter a cor de cada elemento de uma página?

O CSS

O invert é baseado em porcentagem; 100% inverte totalmente as cores e o 0% exibe todas as cores normalmente:

.normal {
	filter: invert(0%);
}

.inverted {
	filter: invert(100%);
}

O senhor pode inverter elementos individuais ou, se inverter o document.documentElementtodo o conteúdo da página será invertido. Os valores informados pelo window.getComputedStyle(el) serão os valores CSS originais, entretanto, de modo que não há como obter os valores invertidos verdadeiros de determinadas propriedades.

A inversão de cores é uma ferramenta de acessibilidade útil, embora muitas vezes seja fornecida pelo sistema operacional do usuário ou por uma ferramenta separada. Posso ver a inversão sendo útil à noite, aliviando o cansaço visual ao olhar para as telas. O senhor consegue pensar em um bom uso da inversão de cores? Compartilhe!