Additional Theme

expikr · expikr · commit a132734ea0bd · 2023-11-23T17:43:49.000+08:00
add tests for additional-themes Update book.js sanitized default sanitize the id name in the DOM catch error if attempting to select or deselect a non-existent theme. sanitize theme names Update book.js Update book.js Update book.js Revert "Update book.js" This reverts commit 0ed9477. Update book.js Update config.rs Revert "Update hbs_renderer.rs" This reverts commit 54ad1d5. Revert "Update config.rs" This reverts commit 06909a7. Revert "Update hbs_renderer.rs" This reverts commit dc0f959. Update hbs_renderer.rs Update hbs_renderer.rs Update config.rs Update book.js Additional Theme
diff --git a/src/config.rs b/src/config.rs
@@ -536,6 +536,8 @@ pub struct HtmlConfig {
     pub google_analytics: Option<String>,
     /// Additional CSS stylesheets to include in the rendered page's `<head>`.
     pub additional_css: Vec<PathBuf>,
+    /// Additional theme.
+    pub additional_theme: Vec<PathBuf>,
     /// Additional JS scripts to include at the bottom of the rendered page's
     /// `<body>`.
     pub additional_js: Vec<PathBuf>,
@@ -595,6 +597,7 @@ impl Default for HtmlConfig {
             copy_fonts: true,
             google_analytics: None,
             additional_css: Vec::new(),
+            additional_theme: Vec::new(),
             additional_js: Vec::new(),
             fold: Fold::default(),
             playground: Playground::default(),
@@ -801,6 +804,7 @@ mod tests {
         curly-quotes = true
         google-analytics = "123456"
         additional-css = ["./foo/bar/baz.css"]
+        additional-theme = ["foobar"]
         git-repository-url = "https://foo.com/"
         git-repository-icon = "fa-code-fork"
 
@@ -848,6 +852,7 @@ mod tests {
             curly_quotes: true,
             google_analytics: Some(String::from("123456")),
             additional_css: vec![PathBuf::from("./foo/bar/baz.css")],
+            additional_theme: vec![PathBuf::from("foobar")],
             theme: Some(PathBuf::from("./themedir")),
             default_theme: Some(String::from("rust")),
             playground: playground_should_be,
@@ -1028,6 +1033,7 @@ mod tests {
         curly-quotes = true
         google-analytics = "123456"
         additional-css = ["custom.css", "custom2.css"]
+        additional-theme = ["barfoo"]
         additional-js = ["custom.js"]
         "#;
 
@@ -1053,6 +1059,7 @@ mod tests {
             curly_quotes: true,
             google_analytics: Some(String::from("123456")),
             additional_css: vec![PathBuf::from("custom.css"), PathBuf::from("custom2.css")],
+            additional_theme: vec![PathBuf::from("barfoo")],
             additional_js: vec![PathBuf::from("custom.js")],
             ..Default::default()
         };
diff --git a/src/renderer/html_handlebars/hbs_renderer.rs b/src/renderer/html_handlebars/hbs_renderer.rs
@@ -715,6 +715,18 @@ fn make_data(
         data.insert("additional_css".to_owned(), json!(css));
     }
 
+    // Add check to see if there are additional themes
+    if !html_config.additional_theme.is_empty() {
+        let mut theme = Vec::new();
+        for name in &html_config.additional_theme {
+            match name.strip_prefix(root) {
+                Ok(p) => theme.push(p.to_str().expect("Could not convert to str")),
+                Err(_) => theme.push(name.to_str().expect("Could not convert to str")),
+            }
+        }
+        data.insert("additional_theme".to_owned(), json!(theme));
+    }
+
     // Add check to see if there is an additional script
     if !html_config.additional_js.is_empty() {
         let mut js = Vec::new();
diff --git a/src/theme/book.js b/src/theme/book.js
@@ -305,7 +305,9 @@ function playground_text(playground, hidden = true) {
         themePopup.querySelectorAll('.theme-selected').forEach(function (el) {
             el.classList.remove('theme-selected');
         });
-        themePopup.querySelector("button#" + get_theme()).classList.add('theme-selected');
+        try {
+            themePopup.querySelector("button#" + get_theme()).classList.add('theme-selected');
+        } catch (e) { }
     }
 
     function hideThemes() {
@@ -318,9 +320,9 @@ function playground_text(playground, hidden = true) {
         var theme;
         try { theme = localStorage.getItem('mdbook-theme'); } catch (e) { }
         if (theme === null || theme === undefined) {
-            return default_theme;
+            return default_theme.replace(/\W+/g, '_').toLowerCase();
         } else {
-            return theme;
+            return theme.replace(/\W+/g, '_').toLowerCase();
         }
     }
 
@@ -331,13 +333,17 @@ function playground_text(playground, hidden = true) {
             stylesheets.ayuHighlight.disabled = true;
             stylesheets.tomorrowNight.disabled = false;
             stylesheets.highlight.disabled = true;
-
             ace_theme = "ace/theme/tomorrow_night";
         } else if (theme == 'ayu') {
             stylesheets.ayuHighlight.disabled = false;
             stylesheets.tomorrowNight.disabled = true;
             stylesheets.highlight.disabled = true;
             ace_theme = "ace/theme/tomorrow_night";
+        } else if (theme == 'rust' || theme == 'light') {
+            stylesheets.ayuHighlight.disabled = true;
+            stylesheets.tomorrowNight.disabled = true;
+            stylesheets.highlight.disabled = false;
+            ace_theme = "ace/theme/dawn";
         } else {
             stylesheets.ayuHighlight.disabled = true;
             stylesheets.tomorrowNight.disabled = true;
@@ -355,17 +361,23 @@ function playground_text(playground, hidden = true) {
             });
         }
 
-        var previousTheme = get_theme();
-
+        var previousTheme = get_theme().replace(/\W+/g, '_').toLowerCase();
+        var selectedTheme =       theme.replace(/\W+/g, '_').toLowerCase();
         if (store) {
-            try { localStorage.setItem('mdbook-theme', theme); } catch (e) { }
+            try { localStorage.setItem('mdbook-theme', selectedTheme); } catch (e) { }
         }
 
-        html.classList.remove(previousTheme);
-        html.classList.add(theme);
+        try { 
+            html.classList.remove( previousTheme );
+            html.classList.add(    selectedTheme ); 
+        } catch (e) { }
+        
         updateThemeSelected();
     }
 
+    // Sanitize theme id names
+    themePopup.querySelectorAll("button").forEach(e=>{e.id=e.id.replace(/\W+/g, '_').toLowerCase();});
+
     // Set theme
     var theme = get_theme();
 
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
@@ -59,6 +59,7 @@
         <script>
             var path_to_root = "{{ path_to_root }}";
             var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "{{ preferred_dark_theme }}" : "{{ default_theme }}";
+            default_theme = default_theme.replace(/\W+/g, '_').toLowerCase();
         </script>
 
         <!-- Work around some values being stored in localStorage wrapped in quotes -->
@@ -83,8 +84,10 @@
             try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
             if (theme === null || theme === undefined) { theme = default_theme; }
             var html = document.querySelector('html');
-            html.classList.remove('{{ default_theme }}')
-            html.classList.add(theme);
+            try { 
+                html.classList.remove('{{ default_theme }}');
+                html.classList.add(theme.replace(/\W+/g, '_').toLowerCase()); 
+            } catch(e) { }
             var body = document.querySelector('body');
             body.classList.remove('no-js')
             body.classList.add('js');
@@ -156,6 +159,9 @@
                             <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
                             <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
                             <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
+                            {{#each additional_theme}}
+                            <li role="none"><button role="menuitem" class="theme" id="{{ this }}">{{ this }}</button></li>
+                            {{/each}}
                         </ul>
                         {{#if search_enabled}}
                         <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
diff --git a/test_book/book.toml b/test_book/book.toml
@@ -9,6 +9,8 @@ edition = "2018"
 
 [output.html]
 mathjax-support = true
+additional-css = ["orange.css"]
+additional-theme = ["Orange"]
 
 [output.html.playground]
 editable = true
diff --git a/test_book/orange.css b/test_book/orange.css
@@ -0,0 +1,39 @@
+.orange {
+    --bg: #f6f6ef;
+    --fg: Black;
+
+    --sidebar-bg: #ff6600;
+    --sidebar-fg: Black;
+    --sidebar-non-existant: color-mix(in srgb, var(--sidebar-bg) 75%, Black);
+    --sidebar-active: White;
+    --sidebar-spacer: color-mix(in srgb, var(--sidebar-bg) 95%, Black);
+
+    --scrollbar: #8F8F8F;
+
+    --icons: #747474;
+    --icons-hover: #000000;
+
+    --links: #828282;
+
+    --inline-code-color: Black
+
+    --theme-popup-bg: #fafafa;
+    --theme-popup-border: #cccccc;
+    --theme-hover: #e6e6e6;
+
+    --quote-bg: #e9e9ed;
+    --quote-border: #8f8f9d;
+
+    --table-border-color: hsl(0, 0%, 95%);
+    --table-header-bg: hsl(0, 0%, 80%);
+    --table-alternate-bg: hsl(0, 0%, 97%);
+
+    --searchbar-border-color: #aaa;
+    --searchbar-bg: #fafafa;
+    --searchbar-fg: #000;
+    --searchbar-shadow-color: #aaa;
+    --searchresults-header-fg: #666;
+    --searchresults-border-color: #888;
+    --searchresults-li-bg: #e4f2fe;
+    --search-mark-bg: #a2cff5;
+}
