🔀 Merge branch 'theme-images' of github.com:mlange-42/mdBook into theme-images

guide/src/format/images/rust-logo-blk-dark.svg

@@ -0,0 +1 @@
+<svg height="144" width="144" xmlns="http://www.w3.org/2000/svg"><path d="m71.05 23.68c-26.06 0-47.27 21.22-47.27 47.27s21.22 47.27 47.27 47.27 47.27-21.22 47.27-47.27-21.22-47.27-47.27-47.27zm-.07 4.2a3.1 3.11 0 0 1 3.02 3.11 3.11 3.11 0 0 1 -6.22 0 3.11 3.11 0 0 1 3.2-3.11zm7.12 5.12a38.27 38.27 0 0 1 26.2 18.66l-3.67 8.28c-.63 1.43.02 3.11 1.44 3.75l7.06 3.13a38.27 38.27 0 0 1 .08 6.64h-3.93c-.39 0-.55.26-.55.64v1.8c0 4.24-2.39 5.17-4.49 5.4-2 .23-4.21-.84-4.49-2.06-1.18-6.63-3.14-8.04-6.24-10.49 3.85-2.44 7.85-6.05 7.85-10.87 0-5.21-3.57-8.49-6-10.1-3.42-2.25-7.2-2.7-8.22-2.7h-40.6a38.27 38.27 0 0 1 21.41-12.08l4.79 5.02c1.08 1.13 2.87 1.18 4 .09zm-44.2 23.02a3.11 3.11 0 0 1 3.02 3.11 3.11 3.11 0 0 1 -6.22 0 3.11 3.11 0 0 1 3.2-3.11zm74.15.14a3.11 3.11 0 0 1 3.02 3.11 3.11 3.11 0 0 1 -6.22 0 3.11 3.11 0 0 1 3.2-3.11zm-68.29.5h5.42v24.44h-10.94a38.27 38.27 0 0 1 -1.24-14.61l6.7-2.98c1.43-.64 2.08-2.31 1.44-3.74zm22.62.26h12.91c.67 0 4.71.77 4.71 3.8 0 2.51-3.1 3.41-5.65 3.41h-11.98zm0 17.56h9.89c.9 0 4.83.26 6.08 5.28.39 1.54 1.26 6.56 1.85 8.17.59 1.8 2.98 5.4 5.53 5.4h16.14a38.27 38.27 0 0 1 -3.54 4.1l-6.57-1.41c-1.53-.33-3.04.65-3.37 2.18l-1.56 7.28a38.27 38.27 0 0 1 -31.91-.15l-1.56-7.28c-.33-1.53-1.83-2.51-3.36-2.18l-6.43 1.38a38.27 38.27 0 0 1 -3.32-3.92h31.27c.35 0 .59-.06.59-.39v-11.06c0-.32-.24-.39-.59-.39h-9.15zm-14.43 25.33a3.11 3.11 0 0 1 3.02 3.11 3.11 3.11 0 0 1 -6.22 0 3.11 3.11 0 0 1 3.2-3.11zm46.05.14a3.11 3.11 0 0 1 3.02 3.11 3.11 3.11 0 0 1 -6.22 0 3.11 3.11 0 0 1 3.2-3.11z" fill="#eee"/><path d="m115.68 70.95a44.63 44.63 0 0 1 -44.63 44.63 44.63 44.63 0 0 1 -44.63-44.63 44.63 44.63 0 0 1 44.63-44.63 44.63 44.63 0 0 1 44.63 44.63zm-.84-4.31 6.96 4.31-6.96 4.31 5.98 5.59-7.66 2.87 4.78 6.65-8.09 1.32 3.4 7.46-8.19-.29 1.88 7.98-7.98-1.88.29 8.19-7.46-3.4-1.32 8.09-6.65-4.78-2.87 7.66-5.59-5.98-4.31 6.96-4.31-6.96-5.59 5.98-2.87-7.66-6.65 4.78-1.32-8.09-7.46 3.4.29-8.19-7.98 1.88 1.88-7.98-8.19.29 3.4-7.46-8.09-1.32 4.78-6.65-7.66-2.87 5.98-5.59-6.96-4.31 6.96-4.31-5.98-5.59 7.66-2.87-4.78-6.65 8.09-1.32-3.4-7.46 8.19.29-1.88-7.98 7.98 1.88-.29-8.19 7.46 3.4 1.32-8.09 6.65 4.78 2.87-7.66 5.59 5.98 4.31-6.96 4.31 6.96 5.59-5.98 2.87 7.66 6.65-4.78 1.32 8.09 7.46-3.4-.29 8.19 7.98-1.88-1.88 7.98 8.19-.29-3.4 7.46 8.09 1.32-4.78 6.65 7.66 2.87z" fill-rule="evenodd" fill="#eee" stroke="#eee" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/></svg>

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
+<img src="images/rust-logo-blk.svg" class="no-dark-themes" />
+<img src="images/rust-logo-blk-dark.svg" class="no-light-themes" />
+```
+
+Try switching the theme to see the effect below (brush icon at the top left of the page):
+
+<img src="images/rust-logo-blk.svg" class="no-dark-themes" />
+<img src="images/rust-logo-blk-dark.svg" class="no-light-themes" />
+
+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.

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, ...

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)?;
 

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)?;
         }

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;
+}

src/theme/index.hbs

@@ -28,6 +28,7 @@
         <link rel="stylesheet" href="{{ path_to_root }}css/variables.css">
         <link rel="stylesheet" href="{{ path_to_root }}css/general.css">
         <link rel="stylesheet" href="{{ path_to_root }}css/chrome.css">
+        <link rel="stylesheet" href="{{ path_to_root }}css/exclude.css">
         {{#if print_enable}}
         <link rel="stylesheet" href="{{ path_to_root }}css/print.css" media="print">
         {{/if}}

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),

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",