Dark- and light-mode images in documenter

General Usage
,
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"/>
 ```
4 Likes