Deleplace / programming-idioms

A collection of good snippets, in a lot of languages
Apache License 2.0
128 stars 8 forks source link

Adapt images for Dark mode #213

Closed Deleplace closed 1 year ago

Deleplace commented 1 year ago

Since #114, some images look ugly.

image

Please review all images and make sure they look acceptable in Light mode and Dark mode as well.

Alternatively, find a way to serve a different version of the image, when in Dark mode.

Deleplace commented 1 year ago

Done: images exist in 2 versions Light/Dark (4 versions when they exist in PNG/WebP).

E.g.

<picture>
    <source srcset="https://storage.googleapis.com/programming-idioms-pictures/idiom/55/int-to-string.dark.webp" media="(prefers-color-scheme: dark)" type="image/webp">
    <source srcset="https://storage.googleapis.com/programming-idioms-pictures/idiom/55/int-to-string.dark.png" media="(prefers-color-scheme: dark)" type="image/png">
    <source srcset="https://storage.googleapis.com/programming-idioms-pictures/idiom/55/int-to-string.webp" type="image/webp">
    <source srcset="https://storage.googleapis.com/programming-idioms-pictures/idiom/55/int-to-string.png" type="image/png">
    <img src="https://storage.googleapis.com/programming-idioms-pictures/idiom/55/int-to-string.png" alt="Turning the integer 123 into the string &quot;123&quot;" width="442" height="99">
</picture>
Deleplace commented 1 year ago

image