search

jstrieb / github-stats

Better GitHub statistics images for your profile, with stats from private repos too
GNU General Public License v3.0
2.97k stars 624 forks source link

Add: Dark Theme #19

Closed GeneralMine closed 2 years ago

GeneralMine commented 3 years ago

It would be nice to have a dark theme like the tokyonight or dracula

jstrieb commented 3 years ago

Hi, thanks for the suggestion! I am probably not planning to implement many themes, but I do eventually hope to implement a single dark theme that matches the native github.com dark theme. Since the inception of this project, I have taken care to design the generated images so that they mimic the GitHub interface as closely as possible, and mimicking the GitHub dark theme certainly falls under that goal.

At the moment, I am holding out for the GitHub team to offer some solution to the problem of detecting the user's dark/light setting from the README so the correct dark/light file could be used, but there have not been any updates. For more on that, see this discussion. I'm planning to wait until they implement this feature so that I don't have to undo any work down the road.

All in all, it is a good suggestion that will be implemented eventually! I will leave this issue open for documentation purposes. Thanks for checking out the project!

andrewlalis commented 3 years ago

Also note that in the meantime of course you can edit the SVG files inside the templates/ directory to hack together whatever theme you want; you don't even need to know a lot about SVG, just look for the colors and change them. Then when the generator runs next, it'll use the new templates' colors.

KnlnKS commented 3 years ago

It would be nice to have a dark theme like the tokyonight or dracula

You can copy my templates if you'd like. The overview one has the tokyonight theme applied. https://github.com/KnlnKS/KnlnKS/tree/main/templates

jstrieb commented 3 years ago

@KnlnKS thanks for sharing this! Do you mind if I link to it from the README.md file?

KnlnKS commented 3 years ago

@KnlnKS thanks for sharing this! Do you mind if I link to it from the README.md file?

@jstrieb Sure!

martimdLima commented 3 years ago

Hey,

@GeneralMine don't know if it is still of any interest to you, but i have converted the template to the colorscheme of colorized dark, so if you or anybody wants to use it you can check this link:

https://github.com/martimdLima/github-stats/tree/master/templates

@jstrieb if you want to copy or use this template in anyway feel free to do it!

jstrieb commented 3 years ago

Hi @martimdLima! Thanks for sharing!

I haven't gotten around to updating the README yet, but probably will soon. I'd be happy to link to your theme as well!

phaticusthiccy commented 3 years ago

Darker Theme: https://github.com/phaticusthiccy/Statics/tree/master/templates Just copy the codes and edit necessary things :)

chirag-droid commented 3 years ago

material-palenight theme https://github.com/chirag-droid/github-stats/tree/master/templates

idiotWu commented 3 years ago

I am generating cards for both the light and dark themes in my own fork: https://github.com/idiotWu/stats. I can send a pull request if you are interested in it :).

Demo (using the special hashes to match themes; cards are committed to the generated branch):

https://user-images.githubusercontent.com/6022672/144722590-dd671afb-67b9-40a9-ad20-c1e67b2174ca.mp4

sme-ek commented 2 years ago

Have you considered making the generated files transparent?

alexcoder04 commented 2 years ago

Have you considered making the generated files transparent?

You would still need to change the font color, so it's white on black and black on white

jstrieb commented 2 years ago

Thanks to all who have made suggestions in this thread! Finally got around to adding a dark theme. The one I added uses styles taken directly from the GitHub stylesheet for their dark mode, so it should (hopefully) match pretty exactly.

It looks like you can now specify whether to use dark mode or light mode images with a URL fragment that the GitHub frontend understands.

There is some undocumented behavior that can be used to work around the fact that the URL fragment filtering doesn't work for images inside links. I am using this workaround in the README for this repo.

In order to only have one image that works for both themes, I use SVG fragment identifiers, which luckily have good browser support.

The code changes featured:

Long story short, if you're using the latest version of this repo, you can include light and dark mode images like this:

<a href="https://github.com/jstrieb/github-stats#gh-dark-mode-only">
  <img src="https://github.com/jstrieb/github-stats/blob/master/generated/overview.svg#gh-dark-mode-only" />
  <img src="https://github.com/jstrieb/github-stats/blob/master/generated/languages.svg#gh-dark-mode-only" />
</a>
<a href="https://github.com/jstrieb/github-stats#gh-light-mode-only">
  <img src="https://github.com/jstrieb/github-stats/blob/master/generated/overview.svg#gh-light-mode-only" />
  <img src="https://github.com/jstrieb/github-stats/blob/master/generated/languages.svg#gh-light-mode-only" />
</a>

Or like this:

![](https://github.com/jstrieb/github-stats/blob/master/generated/overview.svg#gh-dark-mode-only)
![](https://github.com/jstrieb/github-stats/blob/master/generated/overview.svg#gh-light-mode-only)
![](https://github.com/jstrieb/github-stats/blob/master/generated/languages.svg#gh-dark-mode-only)
![](https://github.com/jstrieb/github-stats/blob/master/generated/languages.svg#gh-light-mode-only)

Glad to finally be able to close this issue after more than a year!