Skip to content

Filtros em Imagens

Surgiu a necessidade de aplicar filtros dinamicamente às imagens, por exemplo, de forma a que estas tivessem dark mode quando o dark mode do site está ativo.

Deste modo, é possível adicionar um parâmetro ao link da imagem, de forma a aplicar estes filtros.

Dark Mode

Este filtro inverte as cores da imagem quando o dark mode no site está ativo. Basta adicionar #dark=<mode> ao fim do link da imagem para aplicar este filtro, em que <mode> é um dos modos abaixo.
Por exemplo:

![Descrição da imagem](./link/to/image#dark=1)

Os filtros aplicados com a propriedade filter de CSS são, consoante o modo:

  • 1: invert(1) hue-rotate(180deg) saturate(5)
  • 2: invert(1) hue-rotate(180deg) saturate(3) (recomendado)
  • 3: invert(1) hue-rotate(180deg)
  • 4: invert(1)