mateuszzagorski
commented
2 years ago The problem here is that the styles that are being loaded while generating the mermaid svg are not reading the github's dark theme correctly.
When compared with the styles loaded without GitHub Writer one can see the difference. Copying and applying them to GH Writer's mermaid implementation resolves the problem.
I wasn't able to locate the root cause of this, but short summary on what I was able to find:
- GitHub seems to overwrite the id of mermaids svg to
#diagram. - GitHub's mermaid is being rendered inside the iframe with html element copying the main \ attributes:
<html data-color-mode="dark" data-dark-theme="dark" data-light-theme="light"> - Delaying the execution of
mermaid.init()doesn't change anything.
Currently used color scheme for the mermaid on Github's dark theme is not readable enough, we should take a look at that and improve it.
Examples: