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) ![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. Separate light mode and dark mode images may be presented to the viewer by adding `#light-only` or `#dark-only` to an image path:
Here is an example for different images for light vs. dark themes:
```markdown ```markdown
![rust logo standard edition](images/rust-logo-blk.svg#only-light) ![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 standard edition](images/rust-logo-blk.svg#only-light)
![rust logo dark mode](images/rust-logo-blk-dark.svg#only-dark) ![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 ## Extensions
mdBook has several extensions beyond the standard CommonMark specification. mdBook has several extensions beyond the standard CommonMark specification.