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 00000000..9f108d66 --- /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 963a1538..0bf1ce24 100644 --- a/guide/src/format/markdown.md +++ b/guide/src/format/markdown.md @@ -117,6 +117,28 @@ Which, of course displays the image like so: ![The Rust Logo](images/rust-logo-blk.svg) +## Theme-dependent images + +Image variants for different themes can be used via CSS classes. + +Here is an example for different images for light vs. dark themes: + +```markdown + + +``` + +Try switching the theme to see the effect below (brush icon at the top left of the page): + + + + +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. diff --git a/guide/src/format/theme/README.md b/guide/src/format/theme/README.md index 4a776e60..1d875945 100644 --- a/guide/src/format/theme/README.md +++ b/guide/src/format/theme/README.md @@ -18,6 +18,7 @@ Here are the files you can override: - **_css/chrome.css_** is for UI elements. - **_css/general.css_** is the base styles. - **_css/print.css_** is the style for printer output. + - **_css/exclude.css_** is for [theme-dependent images](../markdown.md#theme-dependent-images). - **_css/variables.css_** contains variables used in other CSS files. - **_book.js_** is mostly used to add client side functionality, like hiding / un-hiding the sidebar, changing the theme, ...