Image padding and dark-mode
Tags: html, css, webdev
Published: 2020-07-18 18:13:37

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 <mark>how to throw your computer in the trash</mark>:

<figure>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2zuop3lbb22ndkmtfa55.png)
  <figcaption>(CERN was really thinking ahead) https://www.w3.org/History/1989/proposal.html 😜</figcaption>
</figure><br>


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?

<figure>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u4zhvuuyz7ypebjh3eaq.png)
  <figcaption>You might align it to the left with the text and it'll look great!</figcaption>
</figure><br>

Ok. and now in dark-mode:

<figure>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/io2rzgzc6m4rl30ugmr6.png)
  <figcaption>Dang... back to 1989 again</figcaption>
</figure><br>

So, if you have a [greenfield project](https://en.wikipedia.org/wiki/Greenfield_project) you can figure out some ideas to help you maneuver this.

Hows about adding padding to all images?

<figure>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8v77d95qze5o4f15hbkz.png)
  <figcaption>Works pretty good... but also - the padding is built into the image and so you can't really progromatically change it.</figcaption>
</figure><br>

<figure>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7jtwmpg6elos45rs270l.png)
  <figcaption>Then in light-mode / you have the padding... but - now you can see a [rag](https://www.fonts.com/content/learning/fontology/level-2/text-typography/rags-widows-orphans#:~:text=is%20your%20goal.-,Rags,both%20margins%20can%20be%20ragged.&text=A%20poor%20rag%20creates%20distracting%20shapes%20of%20white%20space%20in%20the%20margin.). This example doesn't look terrible... but try and imagine that it certainly could.</figcaption>
</figure><br>

So maybe you need a border on it?

<figure>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a5m8ctsx1hypbgfjwol2.png)
  <figcaption>Watch out... if you're not careful - the visual designer and the program designer will have to [work together](https://perpetual.education/an-analogy-for-the-designer-developer-relationship/) - and even maybe understand each other's roles!</figcaption>
</figure><br>

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:

{% codepen https://codepen.io/sheriffderek/pen/XWXyVmJ %}

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?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/msgx40rnobgywdisji0g.jpg)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b27xciee01rbnnxr1eb5.png)