Skip to content

Commit

Permalink
📝 Document how to use dark and light variants
Browse files Browse the repository at this point in the history
  • Loading branch information
hayesall committed Oct 22, 2023
1 parent 5b320a3 commit 62ba466
Showing 1 changed file with 2 additions and 10 deletions.
12 changes: 2 additions & 10 deletions guide/src/format/markdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -117,11 +117,9 @@ Which, of course displays the image like so:

![The Rust Logo](images/rust-logo-blk.svg)

## Theme-dependent images
## Light and Dark Image Variants

Image variants for different themes can be used via CSS classes.

Here is an example for different images for light vs. dark themes:
Separate light mode and dark mode images may be presented to the viewer by adding `#light-only` or `#dark-only` to an image path:

```markdown
![rust logo standard edition](images/rust-logo-blk.svg#only-light)
Expand All @@ -133,12 +131,6 @@ Try switching the theme to see the effect below (brush icon at the top left of t
![rust logo standard edition](images/rust-logo-blk.svg#only-light)
![rust logo dark mode](images/rust-logo-blk-dark.svg#only-dark)

To exclude an image (or any HTML element) for all dark or all light themes
(incl. the Rust theme), use the classes `no-dark-themes` and `no-light-themes`.

For even more control, elements can be hidden on an individual theme basis using the classes
`no-light`, `no-rust`, `no-coal`, `no-navy` and `no-ayu`.

## Extensions

mdBook has several extensions beyond the standard CommonMark specification.
Expand Down

0 comments on commit 62ba466

Please sign in to comment.