Como exibir imagens específicas do modo

Agora que temos a maioria dos conceitos básicos de HTML e CSS no navegador, começamos a implementar novos recursos que eu consideraria aprimoramentos de “qualidade de vida”, muitos dos quais foram inspirados em dispositivos móveis. Um ótimo exemplo é o CSS prefers-color-scheme media query, que permite que os desenvolvedores adaptem seu design às preferências do tema do sistema (escuro ou claro):

/* Light mode */
@media (prefers-color-scheme: light) {
    html {
        background: white;
        color: black;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    html {
        background: black;
        color: white;
    }
}

Enquanto observava meu feed do Twitter, vi um truque incrível do Flavio Copes:

<picture>
    <source
        srcset="https://davidwalsh.name/dark-logo.png"
        media="(prefers-color-scheme: dark)">
    <img src="https://davidwalsh.name/logo.png" />
</picture>

Ao aplicar a consulta de mídia à fonte, o senhor pode definir a imagem a ser carregada. Essa técnica é obviamente valiosa quando o senhor precisa carregar uma nova imagem de origem e não simplesmente alterar uma propriedade CSS.

Talvez o código não seja o mais fácil de manter, mas, mesmo assim, é muito inteligente!