Formulas and diagrams in README not visible in dark mode
aSemy opened this issue ยท 0 comments
Hi ๐
I've got GitHub dark mode enabled.
When I look at the README, I'm not able to view the diagrams and formulas.
- The formulas in the 'Math' column are black text on a transparent background
- I can see the blue/red arrows in the dataflow graph, but the text is also black
When I look at the dataflow graphs directly, because they are SVGs GitHub renders them with a transparent background
Suggestions
SVG Images
Here are my suggestions for improving the visibility of the SVG images:
-
In the SVGs, add a white background (no more transparent backgrounds)
-
Create two different SVGs, one for dark mode, and another for light mode. Apply the appropriate GitHub theme context CSS class to each image.
Users can now specify the theme an image is displayed for in Markdown. Appending
#gh-dark-mode-only
or#gh-light-mode-only
to the end of an image url will define whether it's only shown to viewers using a light or a dark GitHub theme.Here's an example of a commit adding support for light/dark logos)
Formulas
For the formulas I see that they are images that are referenced using the GitHub API
https://github.com/breandan/kotlingrad/blob/0.4.5/README.md?plain=1#L113
https://github.com/breandan/kotlingrad/blob/0.4.5/README.md?plain=1#L134
Perhaps the GitHub syntax might support dark mode? https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/writing-mathematical-expressions
Here are some examples:
Inline expression (using dollars):
Block using $$
:
Block using code fence math
code fence block:
They look good to me! Screenshot of the above example