Nodebestpractices: Use images w/ transparent background – dark theme FTW

[scorphus]

First of all, thanks for these best practices!

Just like many others, I use a dark theme for GitHub with Stylus:

This amazing best practices would look a bit better on dark themes if those images had transparent background.

I'd love to change that and submit a PR. And it would be much easier if I had the original image files, if that's even possible.

[js-kyle]

Hey @scorphus - cool idea, a PR for this would be welcomed! I'll try to find out if those files are available before you start

[goldbergyoni]

@scorphus Sounds interesting, can the user opt-in/out? where can I see an example? Kindly elaborate how it works

[scorphus]

@scorphus Sounds interesting, can the user opt-in/out? where can I see an example? Kindly elaborate how it works

I'm not sure I get it, but I'll try to elaborate. Pardon me if I got it wrong. An image with transparent background blends itself with the background it's on top of.

In theory, it could be seen as a kind of opt-in/out. That is, depending on what background colour the user defines, the image will have that background colour. But in reality, no. The image will be the same for every single user.

In this example, the banner has transparent background.

By the way, we can start with the banner: #327

Thanks!

[js-kyle]

Some users use Chrome extensions etc which automatically create a dark theme background on pages such as Github, so some images intended to be placed on a white background, so don't look very nice

Example: VSCode editor with black background, on master:

Example: PR 237, where the banner is now transparent

There will be no opt/in or out as such, everything will still appear the same for normal users, it just means the image will appear nicer for people who use a dark theme (or, possibly later on when we have the repo running on other mediums such as a static site)

[goldbergyoni]

Got it, so we basically need to make the banner and other images transparent?

[scorphus]

Yes, @i0natan. And for that it would be good to have the original images but if they're not available, it's still doable as per the aforementioned pull request (although that one needs a small improvement – if you look close it's not so smooth, maybe I shrank it too much).

[goldbergyoni]

@idori Do we have those?

[idori]

@i0natan yes, I'll re-make the header with a transparent background and check which other images require work to be dark mode friendly

[goldbergyoni]

Thanks @idori