Usando ícones SVG na documentação de ajuda para que seja visualmente compatível com o Modo Escuro

Geral
1

Após ativar a troca automática de modo escuro, percebi que muitas das minhas capturas de tela explicando botões individuais da interface do usuário ficavam terríveis com seus fundos brancos. Tentei reutilizar o código SVG que a interface real está usando, mas isso não funcionou. Encontrei:

mas usar arquivos SVG baixados diretamente do Font Awesome também não funcionou e o link do GitHub para ícones dessa conversa não correspondia perfeitamente à UI atual do Discourse. Felizmente, tropecei em:

Isso me ajudou a perceber que sim, width e height estão faltando nos downloads do Font Awesome. Encontrei os ícones v5 no Font Awesome e ajustei esses arquivos SVG. Uma altura de 17px funcionou bem para os botões de ação de postagem (14px para os botões do editor) e qualquer largura que fizesse sentido de acordo com a configuração viewBox; uma calculadora de proporção foi útil às vezes.

Além de precisar adicionar width e height, também precisei adicionar um fill ao path. Optei por fill="currentColor" em vez de uma cor estática, pois considerei a cor do texto circundante um excelente padrão. No entanto, eu ainda queria que os ícones correspondessem às cores dos botões da UI e não ao texto circundante, e descobri que poderia manter a sintaxe de upload de arquivo ![alt](file) e ainda assim direcionar esses SVGs específicos, envolvendo-os em um span HTML (algo que usuários comuns não fariam) e adicionando

p > span:not(.image-wrapper) > img, p > span:not(.image-wrapper) > span.image-wrapper > img {
    filter: invert(85%) sepia(14%) saturate(0%) hue-rotate(169deg) brightness(85%) contrast(83%);
}

@media (prefers-color-scheme: dark) {
    p > span:not(.image-wrapper) > img, p > span:not(.image-wrapper) > span.image-wrapper > img {
        filter: invert(51%) sepia(0%) saturate(484%) hue-rotate(216deg) brightness(102%) contrast(88%);
    }
}

ao CSS. Este CSS específico imita o var(--primary-low-mid) quando a cor primária é definida como preto em nosso esquema de cores claro e #eee em nosso esquema de cores escuro, e também leva em conta um span de encapsulamento existente no painel de visualização do editor. Você pode usar um gerador de filtro CSS para descobrir como alterar a cor do SVG quando usado dessa forma. (Dependendo dos seus esquemas de cores, você pode querer verificar como fica se um usuário não tiver a opção de troca automática de modo escuro salva em suas configurações de preferência, mas ainda tiver o dispositivo em modo escuro, pois há um estado intermediário que pode ocorrer ao usar @media (prefers-color-scheme: dark) em seu CSS.)

Espero que este processo de descoberta ajude alguém! Se você quiser baixar e reutilizar/ajustar os ícones que fiz para este propósito (porque isso consumiu um tempo considerável), você pode pegá-los nas páginas de tutoriais que completei até agora: ações de postagem e reações, estilização básica de postagem, estilização avançada de postagem e construtor de enquetes. (Eu substituí apenas os ícones individuais e mantive as capturas de tela do esquema de cores claro para as imagens contextuais, que são uma mistura de imagens tiradas da documentação de ajuda aqui no meta e capturas de tela que fiz do nosso site específico.)

7 curtidas