modo noturno CSS filter imagem
Inverter uma imagem com `filter: invert(1)` deixa as cores erradas: o que era vermelho vira ciano, o que era azul vira laranja. A técnica de modo noturno combina `invert()` com `hue-rotate(180deg)` para desfazer essa troca de matiz sem desfazer a inversão de brilho, preservando a leitura das cores originais enquanto o fundo claro vira escuro. Este gerador aplica os dois filtros na ordem correta automaticamente.
Inverte o fundo claro para escuro preservando a leitura das cores de destaque da interface original.
Sem hue-rotate porque não há matiz colorida a preservar, só preto e branco trocando de lugar.
O contrast() reduzido evita que o branco invertido fique preto absoluto, mais confortável em ambientes escuros.
É uma propriedade que aplica efeitos gráficos como blur, ajuste de cor, saturação e sombra sobre um elemento inteiro. Funciona em imagens, texto, ícones e qualquer elemento HTML.
Porque 180 graus é a rotação completa que leva cada matiz ao seu complementar na roda de cores, desfazendo exatamente a troca de matiz causada pelo `invert()`. Qualquer ângulo diferente de 180 deixaria as cores parcialmente deslocadas em vez de restauradas.
Sim, o canal alfa não é afetado. Só os canais RGB são invertidos, então áreas transparentes continuam transparentes depois do filtro, o que torna a técnica segura para ícones e logos em PNG.
Não. `prefers-color-scheme` é uma media query que detecta a preferência do sistema operacional e deixa você escrever CSS diferente para cada tema. `filter: invert()` transforma visualmente pixels já renderizados, útil para imagens estáticas dentro de uma página escura, mas não substitui um tema dark real construído com variáveis de cor.
filter: none;O CSS é gerado localmente no navegador.