[Bug] prefers-color-scheme in SVG does not work for mobile dark mode

[LitoMore]

Select Topic Area

Bug

How to reproduce

See https://github.com/simple-icons/simple-icons. The readme of the project uses some SVG with prefers-color-scheme inside.

1. Use GitHub mobile app open https://github.com/simple-icons/simple-icons
2. Switch your mobile system color theme to dark mode
3. The logo color should be white, but the current behavior is black

This issue also can be reproduced in the discussion.

See the picture below:

<img width="200" src="https://cdn.simpleicons.org/github/000/fff" />

References

• https://github.com/LitoMore/simple-icons-cdn
• CSS prefers-color-scheme

Similar topic

We should consider some edge scenarios when implementing this feature. Here is a similar topic:

• https://github.com/orgs/community/discussions/61789

[mxie]

Thanks for reporting this @LitoMore! This is currently a known issue on our end that we don't have a fix for just yet. Can you tell me what device you're on?

[LitoMore]

iOS.

[ShineThyuZan]

Use this "<img width="200" src="https://cdn.simpleicons.org/github" />" instead of the original. (REMOVE "/000/fff")

[LitoMore]

Hi @ShineThyuZan, thank you for helping. But please kindly read through my description about this issue.

The current problem is the GitHub mobile app does not support render a dark mode color that prefers-color-scheme which inside of the SVG.

I know there is a solution to use <picture> instead. But the topic in this discussion is I hope they can support perfers-color-scheme inside of the SVG.