diff --git a/guide/src/format/images/rust-logo-blk-dark.svg b/guide/src/format/images/rust-logo-blk-dark.svg new file mode 100644 index 0000000000..c56a2cc91d --- /dev/null +++ b/guide/src/format/images/rust-logo-blk-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/guide/src/format/markdown.md b/guide/src/format/markdown.md index f63e088862..2a2bd3b748 100644 --- a/guide/src/format/markdown.md +++ b/guide/src/format/markdown.md @@ -117,6 +117,21 @@ Which, of course displays the image like so: ![The Rust Logo](images/rust-logo-blk.svg) + +## Light and Dark Image Variants + +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) +![rust logo dark mode](images/rust-logo-blk-dark.svg#only-dark) +``` + +Try switching the theme to see the effect below (brush icon at the top left of the page): + +![rust logo standard edition](images/rust-logo-blk.svg#only-light) +![rust logo dark mode](images/rust-logo-blk-dark.svg#only-dark) + ## Extensions mdBook has several extensions beyond the standard CommonMark specification. diff --git a/src/theme/css/general.css b/src/theme/css/general.css index e7d20da725..b1d95ab6c1 100644 --- a/src/theme/css/general.css +++ b/src/theme/css/general.css @@ -146,6 +146,16 @@ table tbody tr:nth-child(2n) { background: var(--table-alternate-bg); } +.light img[src$="#only-dark"], +.rust img[src$="#only-dark"] { + display:none; +} + +.navy img[src$="#only-light"], +.ayu img[src$="#only-light"], +.coal img[src$="#only-light"] { + display:none; +} blockquote { margin: 20px 0;