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:
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?
Ok. and now in dark-mode:
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?
So maybe you need a border on it?
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
Top comments (0)