Apenas uma nota rápida para informar que hoje adicionámos um modo escuro personalizado com um seletor de temas à direita do menu superior.
A implementação automática(prefers-color-scheme) foi substituída por uma gestão baseada no seletor [data-theme="dark"] que permitia que o tema escuro fosse apresentado quando o utilizador o seleccionava no seu browser. Alguns, como o Opera, têm uma opção"force dark mode" que apresenta uma versão escura bastante decente, mas com alguns bugs como a inversão de imagens mostrando-as em negativo e não permitindo configurar nada.
Optei por utilizar HTML e JS inseridos com elementos GeneratePress e CSS num longo snippet com todas as anotações para ter uma lista completa do que foi ajustado no caso de querer melhorá-lo ou alterá-lo um dia, bem como ter controlo total sobre o carregamento de estilos e uma consistência visual absoluta em todo o sítio Web.
Estas são as principais melhorias em relação à versão automática:
- Otimização da apresentação: Eliminação de cintilações e conflitos através de uma hierarquia de estilos CSS unificada que garante o carregamento imediato do tema escuro.
- Coerência visual: Ajuste preciso das cores e dos filtros nos elementos dinâmicos (GenerateBlocks, Query Loops, separadores e acordeões) para evitar problemas de legibilidade (cores cinzentas sobre fundo branco).
- Controlo dos elementos dinâmicos: Correção dos filtros de mistura
(mix-blend-mode) e das opacidades das imagens e dos menus, assegurando que elementos como o ícone Polylang ou as fichas da página documental mantenham o contraste correto em todas as condições. - Limpeza técnica: depuração de selectores redundantes e unificação das regras CSS para facilitar a manutenção futura sem impacto no desempenho e no CLS.
Isto, que também pode ser feito com um plugin, com as limitações lógicas, decidi fazê-lo com código, não só para poupar um plugin, mas também para ter um controlo granular e uma afinação fina de qualquer pequeno detalhe e para poder agir sobre o possível impacto que possa ter na velocidade de carregamento.
Se alguém estiver interessado no código, o que também não é grande coisa, basta assobiar e eu coloco-o aqui. Se fores um daqueles que gosta de navegar na dark web e encontrares algo que possa ser melhorado, estás à vontade para deixar um comentário ou clicar no botão amarelo "Reportar erro" no fundo de qualquer publicação.
Aproveito também para lembrar que faço trabalhos de otimização do WordPress e, ocasionalmente, migrações e adaptações de modelos GeneratePress com blocos GenerateBlocks.
