Support theme context for images in light vs dark mode

Please add a smarty tag for Readme files that provides the information about the selected theme. This will be useful in switching Logos in the Readme file for light & dark theme.

Something like this: {{ctx.theme}} => possible values: dark or light

Can be used as:
![Logo](https://example.com/logo?theme={{ctx.theme}}),
which should be evaluted as:
![Logo](https://example.com/logo?theme=dark
or
![Logo](https://example.com/logo?theme=light
based on viewers setting.

27 Likes

This is a great suggestion @Shivam010 and we appreciate you taking the time to share it with us! I’ve added this to discuss with the team this week.

2 Likes

Hi, Would be great if the img src SVG images in the .md files could change respectively with the current theme that is being used.

3 Likes

A suggestion would be

![...](light.png|dark.png)

Or in any way you like. It’s not too much to ask for, but forcing all logos and fonts to be outlined is quite radical and will have chilling effects on how things can be designed. This cuts too deeply into brand identity imo.

Think of something like Vercels Next: https://github.com/vercel/next.js/

3 Likes

Hi @drcmda - thanks for sharing this feedback. As an FYI I’m going to merge with another topic to keep the discussion together. Being able to choose light and dark versions of an asset (especially when using transparent pngs) was something that we weren’t able to solve for the beta release but will be exploring over the coming weeks. The screenshot you shared above is a perfect example of why this is an important issue. Ironically we experience the same issue with our own logo :upside_down_face:

2 Likes

Hi,
How can I detect the dark theme in my readme.md files? My images with transparent background don’t look good.

1 Like

Hi @11ume - thanks for reaching out! At the moment for the beta release we do not have theme context support for images in light vs dark modes. It is something however that we have heard a lot of feedback from our community about and will be discussing as a team later this week. I’m going to merge this topic with the existing one for visibility.

1 Like

How are SVG logos embedded in README.md expected to adapt to light or dark mode settings? Is there some documentation available?

For example, the logo in https://github.com/lutzroeder/netron/blob/main/README.md should adapt and show with the same color as paragraph text.

1 Like

Hi @lutzroeder - thanks for reaching out and sharing your feedback. This is a known issue for our initial beta release that we are tracking on our backlog to get fixed. I’m going to merge this topic with a similar topic to keep everything in one place.

Some icons do not appear on the readme page.

1 Like

Thanks for sharing this @halilozel1903! This is a known issue with dark mode that we haven’t yet resolved for the initial beta release, but it’s in our backlog to investigate

Is it possible to have an if/else conditional? that way we can also do other changes depending on theme mode. Similar approach to if/else markdown: https://github.com/andreagentili/markdown-it-condition

example:
::if ctx.theme == “dark”
![Logo](https:// example .com/logo-dark.png)
::else
![Logo](https:// example .com/logo-light.png)

1 Like

You’re welcome. Good works :blush:

Maybe. I think good solution :wink:

An uncolored svg, included in a table like this ![icon](https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/github.svg) or <img width="50px" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/github.svg"/> show up in “black”, rather than picking up the default line color. I don’t see a color in the file itself, so shouldn’t it be rendering in white?

See https://github.com/joerick/cibuildwheel/pull/474 for an inline example.

1 Like

This is great feedback @henryiii for our team to explore further. We had some initial hypotheses about how this could work leading up to today’s announcement, but were looking forward to hearing from the community on what behavior they would expect. I’ll share this with the team!

1 Like

Refer to the GitHub.svg favicon, which has embedded css that changes color depending on user preference, hence why the favicon turns white when your browser is in dark mode.

For now it would be up to the contributors to update the svgs used in readmes to change color depending on the theme.

Example:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
    <style>
        path {
            fill: #000;
        }
        @media (prefers-color-scheme: dark) {
            path {
                fill: #fff;
            }
        }
    </style>
    <path fill-rule="evenodd" d="M0 0h16v16H0z"/>
</svg>
2 Likes

@mxdanger prefers-color-scheme is based on system settings which might be different form the theme users choose in GitHub.

1 Like

Any update on this??

crickets… 20 characters huh?