From 62ba466b676e8943b4cb6a4a132693947ddd3266 Mon Sep 17 00:00:00 2001 From: hayesall Date: Sun, 22 Oct 2023 14:00:51 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Document=20how=20to=20use=20dark?= =?UTF-8?q?=20and=20light=20variants?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- guide/src/format/markdown.md | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/guide/src/format/markdown.md b/guide/src/format/markdown.md index 47b2f581..1f9b74f4 100644 --- a/guide/src/format/markdown.md +++ b/guide/src/format/markdown.md @@ -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.