Support theme context for images in light vs dark mode

I think the issue with this specifically has to do with the equations being images having transparent backgrounds.

The maths images have transparent backgrounds, which is fine; the problem is that the letter shapes’ antialiasing isn’t created by semi-transparent pixels but by semi-white pixels. This would be something to fix in whatever library GitHub is using to render maths behind the scenes.

Once maths uses semi-transparent pixels for antialiasing, then equations would be drawn in pure black and be totally invisible on dark theme. At that point, assuming the maths rendering library isn’t able to change font colour natively, maths equations on dark theme could be fixed by applying a colour inversion with a CSS filter.

I think it would be great if GitHub adds support in the form of either a class name (eg. require-light-bg), which unfortunately will require all images to be <img> tags, instead of using markdown syntax or alternatively read a specific front-matter (where exists) value (eg. img: require-light-bg) that will apply to all images.

Maybe yet another alternative as @rossjrw mentions is to apply an inversion CSS filter, but again - require either a class name or a front-matter value.

Unfortunately this means that all repos with such images will require a new commit, which might be better off to simply re-generate such images with explicit white background.

Edit: Sorry… didn’t see this was 7 months old topic! Please ignore me.

If there are transparent images the black color shines through.
See these links:

or /gravitystorm/openstreetmap-carto/pull/3829

image

ref Transparent images in issue texts makes them unreadable · Issue #983 · StylishThemes/GitHub-Dark · GitHub

2 Likes

Example for test:

[<img width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@5.9.0/icons/facebook.svg">](https://facebook.com)

Result:

But on Dark Theme it looks like:
Снимок экрана 2021-08-12 в 16.45.04

We are waiting for your color system. Good luck in this job

1 Like

Perhaps it would be an idea to stipulate what is so hard about it? Many github issues and pull requests are much more transparent than this “community” forum. There have already been several suggestions in this thread. You’ll have to lay out why it’s difficult otherwise this is all not understandable to us as developers.

Check e.g. https://github.com/crownstone and https://github.com/crownstone/bluenet in gray mode.

1 Like