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..c56a2cc9 --- /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 f63e0888..b256f9f4 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 23da5a04..a4debf6f 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, ... diff --git a/src/book/init.rs b/src/book/init.rs index faca1d09..34dea2b7 100644 --- a/src/book/init.rs +++ b/src/book/init.rs @@ -144,6 +144,9 @@ impl BookBuilder { let mut variables_css = File::create(cssdir.join("variables.css"))?; variables_css.write_all(theme::VARIABLES_CSS)?; + let mut excludes_css = File::create(cssdir.join("exclude.css"))?; + excludes_css.write_all(theme::EXCLUDES_CSS)?; + let mut favicon = File::create(themedir.join("favicon.png"))?; favicon.write_all(theme::FAVICON_PNG)?; diff --git a/src/renderer/html_handlebars/hbs_renderer.rs b/src/renderer/html_handlebars/hbs_renderer.rs index 8ea2f49e..f14abea6 100644 --- a/src/renderer/html_handlebars/hbs_renderer.rs +++ b/src/renderer/html_handlebars/hbs_renderer.rs @@ -244,6 +244,7 @@ impl HtmlHandlebars { write_file(destination, "css/print.css", &theme.print_css)?; } write_file(destination, "css/variables.css", &theme.variables_css)?; + write_file(destination, "css/exclude.css", &theme.excludes_css)?; if let Some(contents) = &theme.favicon_png { write_file(destination, "favicon.png", contents)?; } diff --git a/src/theme/css/exclude.css b/src/theme/css/exclude.css new file mode 100644 index 00000000..9847b1b8 --- /dev/null +++ b/src/theme/css/exclude.css @@ -0,0 +1,18 @@ +.light .no-light, +.rust .no-rust, +.navy .no-navy, +.ayu .no-ayu, +.coal .no-coal { + display: none; +} + +.light .no-light-themes, +.rust .no-light-themes { + display: none; +} + +.navy .no-dark-themes, +.ayu .no-dark-themes, +.coal .no-dark-themes { + display: none; +} diff --git a/src/theme/index.hbs b/src/theme/index.hbs index 2ee58c62..e18f489b 100644 --- a/src/theme/index.hbs +++ b/src/theme/index.hbs @@ -28,6 +28,7 @@ + {{#if print_enable}} {{/if}} diff --git a/src/theme/mod.rs b/src/theme/mod.rs index 6e6b509d..fb3905ed 100644 --- a/src/theme/mod.rs +++ b/src/theme/mod.rs @@ -21,6 +21,7 @@ pub static CHROME_CSS: &[u8] = include_bytes!("css/chrome.css"); pub static GENERAL_CSS: &[u8] = include_bytes!("css/general.css"); pub static PRINT_CSS: &[u8] = include_bytes!("css/print.css"); pub static VARIABLES_CSS: &[u8] = include_bytes!("css/variables.css"); +pub static EXCLUDES_CSS: &[u8] = include_bytes!("css/exclude.css"); pub static FAVICON_PNG: &[u8] = include_bytes!("favicon.png"); pub static FAVICON_SVG: &[u8] = include_bytes!("favicon.svg"); pub static JS: &[u8] = include_bytes!("book.js"); @@ -93,6 +94,7 @@ impl Theme { theme_dir.join("css/variables.css"), &mut theme.variables_css, ), + (theme_dir.join("css/exclude.css"), &mut theme.excludes_css), (theme_dir.join("highlight.js"), &mut theme.highlight_js), (theme_dir.join("clipboard.min.js"), &mut theme.clipboard_js), (theme_dir.join("highlight.css"), &mut theme.highlight_css), diff --git a/tests/init.rs b/tests/init.rs index 2b6ad507..47f3260b 100644 --- a/tests/init.rs +++ b/tests/init.rs @@ -117,6 +117,7 @@ fn copy_theme() { let expected = vec![ "book.js", "css/chrome.css", + "css/exclude.css", "css/general.css", "css/print.css", "css/variables.css",