marking graphs to support prefer-color-scheme

[Van4kk]

Dose the graph support prefer-color-scheme. I tried to make it work with <source> tag and media attribute, but it didn't work. I tried to scrset 2 different links with the same username and different color settings.
Will this feature be available in the future ?

[Van4kk]

FIXED

[//]: # (github activity graph) <-- this caused a bug.
If your file looks similar to the code below, it will get the white theme by default, idk why tho. To fix it just add 1 line between.

[//]: # ( github activity graph)
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://github-readme-activity-graph.cyclic.app/graph?username=Ashutosh00710&bg_color=0d1117&color=30363d&line=e6edf3&point=a371ed&area=true&hide_border=true">
  <source media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" srcset="https://github-readme-activity-graph.cyclic.app/graph?username=Ashutosh00710&bg_color=ffffff&color=1f2328&line=d0d7de&point=8253df&area=true&hide_border=true">
  <img alt="Ionut's github activity graph white theme" src="https://github-readme-activity-graph.cyclic.app/graph?username=Ashutosh00710&bg_color=ffffff&color=1f2328&line=d0d7de&point=8253df&area=true&hide_border=true">
</picture>

[Ashutosh00710]

Hi @Van4kk, thanks for starting this discussion, you have a really good point. I have few things based on my understanding.

Dose the graph support prefer-color-scheme. I tried to make it work with tag and media attribute, but it didn't work. I tried to scrset 2 different links with the same username and different color settings.
Will this feature be available in the future?

• If you want to switch the SVG colors based on your current GitHub theme you can do through a hack:

  <a href="https://github.com/Ashutosh00710/github-readme-activity-graph#gh-light-mode-only">
        <img src="[you graph link]#gh-light-mode-only" width="100%">
  </a>
  
  <a href="https://github.com/Ashutosh00710/github-readme-activity-graph#gh-dark-mode-only">
       <img src="[you graph link]#gh-dark-mode-only" width="100%">
  </a>

• Now when it comes to prefer-color-scheme, no, we cannot use prefer-color-scheme in our code because it is used for specifying color schemes at the document level, and our code is generating an SVG image. It is not relevant for an SVG image which is a self-contained vector graphic.

I have a question can you tell me what do you want as a final result or what you are trying to achieve?

[Van4kk]

Hey @Ashutosh00710, I achived my idea there, in the README.md file. You understood correctly. My mistake was inadvertent, I did not leave a space between the comment and the tag. After, because I tried many color combinations, the graph is no longer displayed due to too many requests. All good, my method worked.

Now when it comes to prefer-color-scheme, no, we cannot use prefer-color-scheme in our code because it is used for specifying color schemes at the document level, and our code is generating an SVG image. It is not relevant for an SVG image which is a self-contained vector graphic.`

Understood!