actions
/
mdBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

📝 Document how to use dark and light variants

This commit is contained in:
hayesall 2023-10-22 14:00:51 -04:00
parent 5b320a3b35
commit 62ba466b67
1 changed files with 2 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
guide/src/format/markdown.md
View File

@ -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)
@ -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.