Image padding and dark-mode

We can't say that we're as excited about "dark-mode" as everyone else - but it's pretty cool.

If you've ever re-themed an old blog/moved to a more prominent background color, you've probably run into this situation where the image was cropped very tightly because it's background-color was the same as the page. Made sense at the time.

Take this diagram for how to throw your computer in the trash:

(CERN was really thinking ahead) https://www.w3.org/History/1989/proposal.html 😜

While this might be the single best graphic design ever created, it seems like it's begging for some padding. Maybe it used to be on a white page? Who knows. Maybe we can ask Tim.

So, what if it was on a white background?

You might align it to the left with the text and it'll look great!

Ok. and now in dark-mode:

Dang... back to 1989 again

So, if you have a greenfield project you can figure out some ideas to help you maneuver this.

Hows about adding padding to all images?

Works pretty good... but also - the padding is built into the image and so you can't really progromatically change it.

Then in light-mode / you have the padding... but - now you can see a rag. This example doesn't look terrible... but try and imagine that it certainly could.

So maybe you need a border on it?

Watch out... if you're not careful - the visual designer and the program designer will have to work together - and even maybe understand each other's roles!

Ok. This is looking pretty good - as long as everyone agrees that this works. Maybe 'pictures' do one thing... and 'figures' do a different thing.

But mom! I don't want padding in light mode! and I don't want to commit to borders everywhere for ever...

Well... ok... but then you have to make some bigger decisions.

You could make all of the image .png - so that you have control over their background color... or - you could build everything with SVG. Those are pretty big choices. There are a lot of things to take into account.

You've got to plan ahead.

https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Here's a quick example with just a toggled class to get the idea across:

https://codepen.io/sheriffderek/pen/XWXyVmJ

You may want to add additional options to your CMS so that you can designate different class/behavior to different images.

Whatever you choose - you'll need to get everyone on the team thinking together - and agreeing on what will be done. Working with constraints is fun!

For cases like Dev.to - where we don't have any control over it - maybe a good solution is to always create images with padding and to use a slightly gray background like this?

This way - it holds its space and separates from the white background?

What do you think?

ALSO: here's another example - of when you get an image that is a .png - like on wikipedia - and you put it in discord or dev - or something dark-mode