instadeepai
docs: new light/dark mode toggle breaks logo in docs
Description
The change from #205, though successful when viewed on GitHub, breaks the Jumanji logo in MkDocs:
It seems that MkDocs is not correctly updating paths. Consider one of the other images on the page in README.md, e.g.:
<img src="docs/env_anim/bin_pack.gif" alt="BinPack" width="16%">
Notice that the image source is prefixed with the docs folder, src=docs/.... But when the docs are built, the resulting index.html:
<img src="env_anim/bin_pack.gif" alt="BinPack" width="16%">
That is, the docs/ prefix is correctly removed.
Yet with the dark/light logo, defined in README.md as:
<p align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="docs/img/jumanji_logo_dm.png">
<source media="(prefers-color-scheme: light)" srcset="docs/img/jumanji_logo.png">
<img alt="Jumanji Logo" src="docs/img/jumanji_logo.png", width="50%">
</picture>
</p>
the resulting paths are not updated in index.html:
<p align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="docs/img/jumanji_logo_dm.png">
<source media="(prefers-color-scheme: light)" srcset="docs/img/jumanji_logo.png">
<img alt="Jumanji Logo" src="docs/img/jumanji_logo.png", width="50%">
</picture>
</p>
hence the missing logo.
Additionally, note: even if we fix the src location issue, we may need to add custom CSS to handle prefers-color-scheme. MkDocs Material has gone for an approach where you append a hash fragment to the url, but GitHub has deprecated such an approach, in favour of what was done in #205.
(Issue found by @djbyrne.)
What Jumanji version are you using?
v0.3.1
Which accelerator(s) are you using?
n/a
Additional System Info
No response
Additional Context
No response
(Optional) Suggestion
No response
