Transparent Cards

[HPaulson]

As mentioned in #689, #66, and #79, a Dark theme would be a nice feature to have. Now that GitHub has an official dark mode theme- it would be especially nice to get this option. I've read the threads with ideas about using a browser agent or something similar- but here I'm actually advocating for a transparent background for the SVG. Since we don't what know the future may hold for GitHub themes, it would be especially useful if the card background were simple- transparent. Having a transparent background would allow users are dark and light mode sees the card with the background of their chosen theme and is also scalable if Discord adds more themes (Not to mention dark readers, etc- which may have many different dark colors)!

I'm curious what the community thinks of this idea. I think it could easily be done with a URL param, and I can't think of any issues or limitations to this.

Thanks! 👍

[underwindfall]

Maybe instead of having an transparent cards, we could have a api to get current theme from prefers-color-scheme, give us a chance to change themes between dark and light.

[HPaulson]

The issue with this, as mentioned above, is that it's not very scalable. People may use dark readers and not the traditional GitHub Dark mode, making it so the color of cards would look strange to them. Additionally, GitHub could add new themes, which would need to be added to the said check. Would make more sense to have it be transparent, and show the background as whatever theirs is- since it would work in both of these cases without additional changes.

[underwindfall]

Not surprise about user could use dark reader instead of Github dark mode.

Raise Me A pretty tricky question here, what if the user Dark reader in GitHub dark mode 😂 or cross choices between these two things.

[anuraghazra]

prefers-color-scheme method does not work btw, the svgs are server rendered and there is no way to detect user's preferred color scheme.

Only way it could be possible if github somehow sends http headers with theme information so that we can detect it and based on that change the colors.

Or this -> https://github.community/t/support-theme-context-for-images-in-light-vs-dark-mode/147981

[anuraghazra]

Hi @HPaulson i've actually tried out with transparent cards, well it works but partially.

changing the background color to transparent does work but the font color still stays black so does not look too good at this point.

Here's a demo ->

I've created another example with a generic color which would work on both darkmode and lightmode

This kinda looks good tho. we can consider this for now until github provides a way to toggle the images somehow.
Added a PR for this: #706

[JoseDeFreitas]

Hello 👋. It looks really good! One thing I would change is the border color to the one that GitHub uses in the dark theme (which is #30363d if I'm correct.) I think this would look good in both light/dark themes. If not, a darker one could be balanced. About the text, it gets a little difficult, but maybe a lighter blue would look good (at least not the same as the title of the card.) This is still being implemented so there are still things to do; this is my opinion 🎨

[HPaulson]

@anuraghazra This blue font looks GREAT! Very good addition. Thanks for adding it to #706!

[rudikershaw]

Looks great. Looking forward to it.

[dannyverdel]

@JoseDeFreitas This looks awesome. But I can't get it to work for myself. How do I do this? Thanks in advance

[JoseDeFreitas]

@JoseDeFreitas This looks awesome. But I can't get it to work for myself. How do I do this? Thanks in advance

I don't know how is this going, but I found that #758 satisfies this behaviour. No idea how it is implemented; I recommend you ask Anurag himself.

[Hephaest]

Hi @HPaulson, I think transparent background is the best solution for a smooth mode switch yet. I provide the theme I figured out and used the same Github font colour theme. 👇🏻

Check out PR #1201 or just fork my repo and use theme=transblue.

Hope you like it! 😄

[rickstaa]

All the currently available ways for creating a dynamic theme are now documented in the README.md (See https://github.com/anuraghazra/github-readme-stats#responsive-card-theme). GRS now also includes a transparent theme.