Dark- and light-mode images in documenter

General Usage
,
1

In github markdown, you can supply two images and include them both in the markdown, appending #gh-dark-mode-only or #gh-light-mode-only to the end of the image url and the appropriate one will display, depending on whether the page is displayed in light or dark mode. Is there a similar capability in Documenter.jl?

2

Add a file eg extras.css to docs/src/assets/:

.display-light-only {
    display: block;
}

.display-dark-only {
    display: none;
}

.theme--documenter-dark .display-light-only {
    display: none;
}

.theme--documenter-dark .display-dark-only {
    display: block;
}

and include this CSS file into your make.jl file:


format   = Documenter.HTML(
      ...
        assets=["assets/extras.css"],
      ...
        ),

Then you can refer to different images for light and dark modes using the @raw form in your Markdown:

 ```@raw html
      <img class="display-light-only" src="assets/hsf_logo_blue.png" alt="hsf logo"/>
      <img class="display-dark-only" src="assets/hsf_logo_blue_darkbg.png" alt="hsf logo dark mode"/>
 ```
3 Likes