Quando assisti o curso Dark Mode: um projeto em HTML/CSS do professor Luan Alves não teve como não pensar em uma solução mais prática que acessar uma outra imagem do trono na cor branca, afinal, as duas imagens são idênticas, não vejo necessidade de carregar duas imagens, pensei que certamente deve haver uma solução pro CSS de invertermos a cor da imagem com o trono preto, fazendo com que ele fique branco.
E encontrei uma solução: o método filter!
Pra não ter confusão segue o link do projeto Dark Mode
No projeto original ele manipula a classe "dark-mode" para alternar as cores da página e alternar a imagem "trono-preto.png" para "trono-branco.png". Segue como está no código original:
.dark-mode {
--bg-cor: black;
--fonte-cor: #ffffff;
--label-icon: url("https://caelum-online-public.s3.amazonaws.com/1369-alura-mais-dark-mode/sol.png");
--trono-img: url("https://caelum-online-public.s3.amazonaws.com/1369-alura-mais-dark-mode/trono-branco.png");
}
A solução que encontrei para a minha questão foi substituir o código onde chama a variável --trono-img pra receber a url da imagem com o trono branco, e chamar a classe "trono" e usar o método filter pra conseguir manipular a imagem.
O código então ficou assim:
.dark-mode {
--bg-cor: black;
--fonte-cor: #ffffff;
--label-icon: url("https://caelum-online-public.s3.amazonaws.com/1369-alura-mais-dark-mode/sol.png");
.trono {
filter: invert(100%)
}
}
O resultado aparentemente fica o mesmo, mas temos uma imagem a menos para carregar!
Pensei nisso pois quando for necessário fazer algo do tipo não precisar carregar mais imagens quando não for necessário, deixando o projeto mais leve. Claro que essa solução só vai servir pra inverter o branco para o preto, se a imagem for colorida as cores vão se inverter (por exemplo, o verde vai ficar vermelho, o azul fica laranja etc), mas o filter tem outras funções além do invert(), são elas: grayscale(), saturate(), sepia(), brightness(), contrast() entre outras.
Assim é possível manipular as cores nas imagens direto pelo CSS. Esse método é legal também para caso você queira fazer alguma manipulação nas cores da imagem sem ter que usar um programa próprio pra isso, e também sem ter que carregar uma imagem, podendo manipular uma imagem que já está carregada em algum lugar.
