Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This fixes #456.
The HTML this plugin generates is a little more complex now. We generate 3 variants of each graph now:
The code block is a fallback in case the mermaid library failed to load or JavaScript is disabled by the user.
CSS is used to only ever show one of the 3 variants.
Some implementation details
body.light, :root[data-theme="light"]
to support 0.22.x (see Is the way dark-light-theme selection is implemented part of the public API? TypeStrong/typedoc#1764) and the upcoming 0.23 (see Use data-theme attribute for themes on root element TypeStrong/typedoc#1706).requestAnimationFrame
is necessary because mermaid.js adds thedata-processed="true"
attribute before the SVG is inserted. This causes problems because we can only hide the wrong dark/light theme variant after its SVG has been inserted.Screenshots
Dark mode:
Light mode:
No JS: