# Dark- and light-mode images in documenter

**URL:** <https://discourse.julialang.org/t/dark-and-light-mode-images-in-documenter/124214>\
**Category:** General Usage\
**Tags:** documenter, markdown\
**Created:** [December 27, 2024, 6:16pm UTC](https://discourse.julialang.org/t/dark-and-light-mode-images-in-documenter/124214 "2024-12-27T18:16:12Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![moble](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/moble/32/23535_2.png) [@moble](https://discourse.julialang.org/u/moble)\
**Post date:** [December 27, 2024, 6:16pm UTC](https://discourse.julialang.org/t/dark-and-light-mode-images-in-documenter/124214/1 "2024-12-27T18:16:12Z")

</div>

In github markdown, [you can](https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/) 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?

---

<div class="post-metadata">

**Author:** ![cormullion](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/cormullion/32/49131_2.png) [@cormullion](https://discourse.julialang.org/u/cormullion)\
**Post date:** [December 27, 2024, 6:37pm UTC](https://discourse.julialang.org/t/dark-and-light-mode-images-in-documenter/124214/2 "2024-12-27T18:37:32Z")

</div>

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

```julia
.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:

```julia

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"/>
 ```

````