[Feature] Dark mode

[filiptronicek]

It is a really useful feature, that we can change the colors of the stats, but I would appreciate some sort of auto dark mode With dark mode coming to GitHub, I think it will have to be done sooner or later.

I have a couple of proposed solutions, but none of them seems perfect.

1. If the auto theme is enabled, query a weather service such as The Open Weather API, to get the sunset time for the current timezone - I am not sure how to get the time zone though.

Example: client => Vercel <= Weather API

2. It would be best if you could query the @prefers-color-scheme data of the browser, as no timezone or other preference data would be needed.

Query: https://github-readme-stats.vercel.app/api?username=anuraghazra&prefers=dark

3. The hardest solution - we could contact GitHub directly, to perhaps provide a feature, to set alternative image sources according to the current theme.

Something like: [GitHub README stats]({dark: https://darkmodeurl}, light: https://lightmodeurl) in markdown

[anuraghazra]

Thanks for requesting the feature @filiptronicek this sounds good, i'll see what i can do.
related to #66

[SukkaW]

1. It would be best if you could query the @prefers-color-scheme data of the browser, as no timezone or other preference data would be needed.

It is nearly impossible to get the media query through an image element. And of course GitHub won't let you inject any <style> or <script> tag. It is just impossible.

An alternative is using <picture> and <source> tag:

   <picture>
      <source 
        srcset="settings-dark.png"
        media="(prefers-color-scheme: dark)"
      />
      <source
        srcset="settings-light.png"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
      />
      <img src="settings-light.png" />
    </picture>

But I am not sure whether GitHub will allow us to use the <picture> & source tag.

[anuraghazra]

@SukkaW true, but the issue is not about whether github supports style/script tags or not, we can put style tag on SVG and we are also doing CSS animations there, but the real problem is even if i put prefer-color-scheme media queries it would not change because the svg is rendered and uploaded to github's CDNs (although i did not tested if it works)

I have to do some testing to see if it works.

[filiptronicek]

Let's see if this works: @SukkaW @anuraghazra

[anuraghazra]

@filiptronicek worked? Also even if it's works, kinda too much boilerplate and same as just swaping the colors (which we are doing right now)

So we can just render the white card on light mode and black on dark mode

[filiptronicek]

Tried changing my preference on Chrome Beta, doesn't look like it would work :(

[SukkaW]

@anuraghazra @filiptronicek

No, it doesn't.

[rjoydip-zz]

Hello folks, for dark mode it's working in local. Hope I will able to produce some update after deploy it and verify it in live mode.

[filiptronicek]

@rjoydip that would be awesome! Super excited to see it in action

[anuraghazra]

Hello folks, for dark mode it's working in local. Hope I will able to produce some update after deploy it and verify it in live mode.

Yes these stuff works locally but not in production because we are not serving directly from the server, github will reupload and serve from their CDNs.

Same issue I faced when detecting user agent #45

[rjoydip-zz]

@filiptronicek @anuraghazra
Plese checkout below link of live deployment. It's working
https://github-readme-stats.rjoydip.vercel.app/api?username=rjoydip&show_icons=true

[anuraghazra]

@rjoydip cool then, open the PR! 💯

[rjoydip-zz]

Yes, but I will check with this in my README once before PR.

It's working in github.

PR #181

[anuraghazra]

I'm still wondering why @filiptronicek's experiment failed, did you used the media queries inside the picture tag?

[SukkaW]

@anuraghazra I will bring up my own test again.

<picture>
      <source 
        srcset="https://via.placeholder.com/1000x618.png?text=Dark+Mode"
        media="(prefers-color-scheme: dark)"
      />
      <source
        srcset="https://via.placeholder.com/1000x618.png?text=Light+Mode"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
      />
      <img src="https://via.placeholder.com/1000x618.png?text=Fallback+Mode" />
</picture>

---

Update

It appears that GitHub will transform the <picture> into simple <img>.

[anuraghazra]

Yeah, Github does support SVG based CSS thats why we could do animations and stuff but not picture tags. so using media queries on picture tag wont work

<picture>
      <source 
        srcset="https://via.placeholder.com/1000x618.png?text=Dark+Mode"
        media="(prefers-color-scheme: dark)"
      />
      <source
        srcset="https://via.placeholder.com/1000x618.png?text=Light+Mode"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
      />
      <img src="https://via.placeholder.com/1000x618.png?text=Fallback+Mode" />
</picture>

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[k06a]

Was it solved?

[filiptronicek]

@k06a yes, in short, it can't be done as of now, sounds like a nice thing to request from GitHub over at https://github.com/github/feedback/discussions 👀

[RodrigoTomeES]

Hi everyone,

I got a workaround for prefers-color-scheme CSS media feature. I implemented it for github-readme-activity-graph in this pull request. I think it would be easy reply the same here.

I made a readme with the workaround and you can see here but... here is a little spoiler

So let's go 🚀

[anuraghazra]

Hi everyone,

I got a workaround for prefers-color-scheme CSS media feature. I implemented it for github-readme-activity-graph in this pull request. I think it would be easy reply the same here.

I made a readme with the workaround and you can see here but... here is a little spoiler

So let's go 🚀

I don't think this works, and we already tried this out.
There is a better option available. with github's new darkmode switching URLs
#1415 (comment)

[RodrigoTomeES]

Hi @anuraghazra ,

The SVG works, just change your browser preferences an check that Github setting follow this. But maybe you're right, I didn't know that functionality. Although with the SVG approach the browser preferences will work in a lot of sites, not only in GitHub.

Ashampoo_Snap_domingo.20.de.febrero.de.2022_11h11m35s_001_.mp4

[jx11r]

@RodrigoTomeES Hi, I like the idea, but I tried this in the GitHub App, it didn't work.

[RodrigoTomeES]

@RodrigoTomeES Hi, I like the idea, but I tried this in the GitHub App, it didn't work.

Hi, yes GitHub App isn't compatible because always return light them 😢

[Rudxain]

<picture>
      <source 
        srcset="https://via.placeholder.com/1000x618.png?text=Dark+Mode"
        media="(prefers-color-scheme: dark)"
      />
      <source
        srcset="https://via.placeholder.com/1000x618.png?text=Light+Mode"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
      />
      <img src="https://via.placeholder.com/1000x618.png?text=Fallback+Mode" />
</picture>

@filiptronicek , @SukkaW , @RodrigoTomeES All of these work in Firefox for GNU-Linux-x64 (Debian base) now! I still need to test in other browsers