GitHub - Selecionando Imagens com base no tema

Como desenvolvedor, desenvolvemos projetos, escrevemos código o dia todo e temos a opção de publicá-lo no GitHub para guardar (uma espécie de backup), permitir que outras pessoas entendam e usem nosso projeto. E com isso o Markdown desempenha um papel vital na explicação do código, utilizando para descrever seus projetos, adicionar snippets de utilização entre outras coisas.

Todos vocês sabem o quanto é a mania do Dark Mode hoje em dia principalmente entre os Devs. Mas a maioria dos navegadores tem o modo light como padrão, caso você não saiba o GitHub adapta a maioria das partes do README de acordo com o tema escolhido seja ele Light ou Dark, mas ele não faz nada com suas imagens por padrão, ou seja se tiver uma imagem com a mesma tonalidade que a cor do Dark mode possivelmente as pessoas só irão enxergar um espaço vazio em seu README.

Então tem uma solução que você pode querer utilizar para otimizar suas imagens de acordo com o tema atual do navegador da pessoa que está visualizando ou também talvez demostrar seu conhecimento acima da média da ferramenta porque não?

Mãos a obra

O procedimento é muito simples (é sério, não estou brincando, é realmente muito simples):

• Primeiro de tudo será necessário criarmos 2 versões separadas de suas imagens que serão utilizadas como "capa do seu repositório" (ou ícone como preferir), como por exemplo esse logo de um aviãozinho de papel que coloquei, onde a versão que está preenchida de preto será para visualizadores que estão utilizando o tema Light e o que está com o contorno em cinza bem claro será para visualizadores que estão utilizando o tema Dark:

• Agora vem o nosso "segredo", paara tornar uma imagem visível apenas no Dark mode, adicione #gh-dark-mode-only no final do URL da imagem, e para tornar uma imagem visível apenas no Light mode, adicione #gh-light-mode-only, como exemplificado logo abaixo:

https://user-images.githubusercontent.com/60971382/154115099-ad024ae0-95ed-4f77-9e08-6c724abb6b08.png#gh-dark-mode-only

https://user-images.githubusercontent.com/60971382/154115268-8bfc611f-e3a8-4078-b5c0-20a2bd4de0b7.png#gh-light-mode-only

É isso, agora nossa variante Dark mode da Imagem só será visível no Dark mode e a variante Light mode só será visível no Light mode
simples assim.

Fontes onde pesquisei esse conteúdo:

• https://github.com/settings/appearance
• https://docs.github.com/pt/account-and-profile/setting-up-and-managing-your-github-user-account/managing-user-account-settings/managing-your-theme-settings