Feature Request: Make Icon Background Transparent for Better Theme Compatibility

[dathbe]

Just as the title says. The little giftbox icon has a white background, so it only works well with themes that have a white background. Setting the background to transparent would allow a wider range of themes to be used in an aesthetically pleasing way.

[Wingysam]

It's slightly complicated to do that because some of the body of the gift is also white. Selecting by color and making anything white transparent would cause problems. Maybe I could select by color then deselect relevant regions?

[dathbe]

If you post the original file, I can see what i can do in photoshop. Edit, I found it at /src/static/mg/logo.png. I'll post a couple options

[Wingysam]

Here's the full-res version

[Wingysam]

It looks like I made a transparent version but reverted to the opaque version 2 years ago. https://github.com/Wingysam/Christmas-Community/commit/7f6f1d3c8df77e580d7f17ebcf3fb38427c0ac18

[dathbe]

Here are a couple options. I think you're right that the fully transparent version doesn't work. I kind of like either the one with the green circle or the one with the rounded corners. These were done on the /src/static/mg/logo.png. If you like any of them, I can re-create it with the full res version you just posted. I can also go in any other direction if you have suggestions.

[Wingysam]

I think the green circle gives the app some personality. Could you upload the full-res version of it please? Thanks!

[dathbe]

Here is an PNG version. If github hosts a lower res version or you want the PSD (Photoshop) file, I can figure out a better way to get these to you.

[Wingysam]

It's 2457x2459. Is it meant to be 1:1 ratio?

[dathbe]

It's 2457x2459. Is it meant to be 1:1 ratio?

I did not make it exact. I made the circle a true circle, and then just cropped to within a couple pixels of the outside of the ring. You could crop it (or expand it) by 2 pixels if it fits the website better.

[Wingysam]

I think it's necessary to have a perfect square for the home screen icon when you add the site to home screen but otherwise it can be any shape. The old icon without transparency is better for that case so everything works out well.

[dathbe]

Easy enough:

[Wingysam]

Thanks for making the icon with the circle!

[dathbe]

So I'm kinda a noob when it comes to building docker containers, so how would I roll this change into a docker deployment? It looks like your docker image (https://hub.docker.com/r/wingysam/christmas-community) hasn't been updated since January.

[Wingysam]

I'll be pushing a new version and build of the docker image once #109 is merged.