Support theme context for images in light vs dark mode

crickets… 20 characters huh?

Let’s assume they’ll update us when they have something. The change is still in beta after all.

It would also be nice if github sends which theme user is using with response headers maybe?
x-github-theme or x-github-isdark something like that?

use cases:

Detecting user’s theme preference from the response headers and changing the dynamically rendered svg accordingly.

https://github.com/anuraghazra/github-readme-stats/issues/79
https://github.com/anuraghazra/github-readme-stats/issues/739
https://github.com/anuraghazra/github-readme-stats/discussions/690
https://github.com/anuraghazra/github-readme-stats/issues/777

I know this is a very specific feature request but this might also be helpful. :slight_smile:

1 Like

I was just reading the README of this repo and struggled with the formulae they had. Just an observation, most likely you are already aware :slight_smile:

Hey @TheSoma300 - thanks for taking the time to report this! For the sake of visibility, I’m going to merge your topic with another thread where many have requested theme context for images in GitHub. This is something on our radar that we will be investigating a solution for!

@kethan1 @tinspin Prior to the holiday break, the team primarily focused on addressing bugs. Supporting theme context for images was highly requested by customers so we do plan on investigating a solution for it while we’re in beta but just don’t have a concrete timeline to share yet!

3 Likes

Hii,
I found a trick online to render math equations on github README page using Latex syntax. Something like this: img src=“https://render.githubusercontent.com/render/math?math=(P_{t+2} - P_{t+1})/P_{t+1}”

The rendered equations doesn’t render according to the mode. In the dark mode, it is still rendered in black.

2 Likes

Thanks for sharing this example @pia-nyk! We have been getting a lot of community requests/feedback to support theme context for images in light vs dark modes. I’m going to merge this topic with that one so that we can keep all related requests in one place. Is the README example you shared above by chance in a public repo? If so can you share a link? :pray:

Black elements are almost invisible on transparent images. For example page of cert-manager.

3 Likes

@levonet thanks for sharing the feedback on black images/elements not being very visible in dark mode! We have a related topic on supporting theme context for images in light vs dark mode. I’m going to merge your comment with that topic to keep in one place

Well, when will there be a concrete timeline for this issue? I think it’s pretty huge, considering the whole feature is basically unusable regarding markdown stuff. Sure, some pages are not dark-mode-ified yet and profile pictures get a white background, but breaking like 35% of all readmes on GitHub dark mode isn’t a “beta oopsie”.

There’s literally no sane workaround for this as well, so making this a top priority would be really nice.

3 Likes

Btw, I would suggest two features: Inline and block theme context handling. Like the different comment types in javascript work.

Block level theme context handling allows for more complicated stuff and would look like:

    # Logo:
    <!-- [if darkmode]>
        ![a bright image](./brightlogo.png)
        You are in dark mode
    <![endif]-->
    <!-- [if !darkmode]>
        ![a dark image](./darklogo.png)
        You are not in dark mode
    <![endif]-->

We could also use markdown reference links that are never referenced, like here:

    [//]: # darkmode
        ![a bright image](./brightlogo.png)
        You are in dark mode
    [//]: # end darkmode
    
    [//]: # !darkmode
        ![a dark image](./darklogo.png)
        You are not in dark mode
    [//]: # end !darkmode

GitHub Markdown would be fine with both styles, the second one is better though, because it doesn’t output actual comments in the resulting html.

2 Likes

Hi @nnmrts thanks for taking the time to share your feedback and implementation suggestions! We agree this is an important issue - I can’t tell you how many internal repos I’m in that have a transparent png black GitHub logo that completely disappears in dark mode. I don’t have a concrete timeline for you on when we’ll ship support for this, but I am hosting a workshop with the team tomorrow focused completely on this topic.

1 Like

I have transparent svgs, instead of changing my svgs to have white backgrounds, should this be possible to handle in the markdown itself?

GitHub Flavored Markdown Spec doesn’t seem to have a way to handle this at the moment unless you want to change all your images to html.

Might be cool to have a “default image background” setting on your repo for older repos that don’t look good in dark mode where people don’t have time to modify their images to look good in dark mode.

I think this might be my solution for now:

find . -name '*.svg' -exec sed -i'' '0,/style="width/s//style="background-color:white;width/' {} \;

Hi @BlackthornYugen - thanks for reaching out! I’m going to merge this with a similar topic related to supporting theme context for images in light vs dark mode. This has been a huge point of feedback since our beta launch and is something our team will start investigating potential solutions for this week. Its super helpful to have additional use cases - like svgs in old repos - for our internal exploration! :pray:

Thanks for the update. GitHub is (yet again) one of the few companies actually listening and responding, so please excuse my slight grumpiness in the beginning, as this is unfortunately not something I am used to when it comes to other services and their issues.

Looking forward to whatever your team comes up with to fix this.

Oh, and one more suggestion for just images. A lot of suggestions (as well as the ones I made) assume you changing the actual md file. GitHub could implement something that doesn’t need you to change your markdown, but to add alternative image files. For example, a current markdown file could look like this:

![](./media/logo.png)

Let’s suppose the directory “media” currently only has the file “logo.png” in it, which is black and looks bad in dark mode. Without changing the original markdown file, you could then add the file “logo-light.png” to that same directory. GitHub could then, with CSS or even just with altering the md-to-html conversion, display that alternate light logo image in dark mode if and only if it’s in that same directory. If there’s no alternate image, then don’t change anything.

Some research:

3 Likes

@gaknoll Any updates

1 Like

@gaknoll is there any timeline for this feature?

1 Like