Additional Theme

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 0ed9477bf418c48615f7f48fe6209874603401fc.

Update book.js

Update config.rs

Revert "Update hbs_renderer.rs"

This reverts commit 54ad1d530003e8000b725da96cced424e572445c.

Revert "Update config.rs"

This reverts commit 06909a72e5675979f1d686bc2a127b8d77491295.

Revert "Update hbs_renderer.rs"

This reverts commit dc0f9595619dd4ede3f2812d370112ef55ba8f54.

Update hbs_renderer.rs

Update hbs_renderer.rs

Update config.rs

Update book.js

Additional Theme
This commit is contained in:
expikr 2023-04-09 17:46:10 +08:00
parent 660cbfa6ce
commit a132734ea0
6 changed files with 89 additions and 11 deletions

View File

@ -536,6 +536,8 @@ pub struct HtmlConfig {
pub google_analytics: Option<String>, pub google_analytics: Option<String>,
/// Additional CSS stylesheets to include in the rendered page's `<head>`. /// Additional CSS stylesheets to include in the rendered page's `<head>`.
pub additional_css: Vec<PathBuf>, 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 /// Additional JS scripts to include at the bottom of the rendered page's
/// `<body>`. /// `<body>`.
pub additional_js: Vec<PathBuf>, pub additional_js: Vec<PathBuf>,
@ -595,6 +597,7 @@ impl Default for HtmlConfig {
copy_fonts: true, copy_fonts: true,
google_analytics: None, google_analytics: None,
additional_css: Vec::new(), additional_css: Vec::new(),
additional_theme: Vec::new(),
additional_js: Vec::new(), additional_js: Vec::new(),
fold: Fold::default(), fold: Fold::default(),
playground: Playground::default(), playground: Playground::default(),
@ -801,6 +804,7 @@ mod tests {
curly-quotes = true curly-quotes = true
google-analytics = "123456" google-analytics = "123456"
additional-css = ["./foo/bar/baz.css"] additional-css = ["./foo/bar/baz.css"]
additional-theme = ["foobar"]
git-repository-url = "https://foo.com/" git-repository-url = "https://foo.com/"
git-repository-icon = "fa-code-fork" git-repository-icon = "fa-code-fork"
@ -848,6 +852,7 @@ mod tests {
curly_quotes: true, curly_quotes: true,
google_analytics: Some(String::from("123456")), google_analytics: Some(String::from("123456")),
additional_css: vec![PathBuf::from("./foo/bar/baz.css")], additional_css: vec![PathBuf::from("./foo/bar/baz.css")],
additional_theme: vec![PathBuf::from("foobar")],
theme: Some(PathBuf::from("./themedir")), theme: Some(PathBuf::from("./themedir")),
default_theme: Some(String::from("rust")), default_theme: Some(String::from("rust")),
playground: playground_should_be, playground: playground_should_be,
@ -1028,6 +1033,7 @@ mod tests {
curly-quotes = true curly-quotes = true
google-analytics = "123456" google-analytics = "123456"
additional-css = ["custom.css", "custom2.css"] additional-css = ["custom.css", "custom2.css"]
additional-theme = ["barfoo"]
additional-js = ["custom.js"] additional-js = ["custom.js"]
"#; "#;
@ -1053,6 +1059,7 @@ mod tests {
curly_quotes: true, curly_quotes: true,
google_analytics: Some(String::from("123456")), google_analytics: Some(String::from("123456")),
additional_css: vec![PathBuf::from("custom.css"), PathBuf::from("custom2.css")], additional_css: vec![PathBuf::from("custom.css"), PathBuf::from("custom2.css")],
additional_theme: vec![PathBuf::from("barfoo")],
additional_js: vec![PathBuf::from("custom.js")], additional_js: vec![PathBuf::from("custom.js")],
..Default::default() ..Default::default()
}; };

View File

@ -715,6 +715,18 @@ fn make_data(
data.insert("additional_css".to_owned(), json!(css)); 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 // Add check to see if there is an additional script
if !html_config.additional_js.is_empty() { if !html_config.additional_js.is_empty() {
let mut js = Vec::new(); let mut js = Vec::new();

View File

@ -305,7 +305,9 @@ function playground_text(playground, hidden = true) {
themePopup.querySelectorAll('.theme-selected').forEach(function (el) { themePopup.querySelectorAll('.theme-selected').forEach(function (el) {
el.classList.remove('theme-selected'); el.classList.remove('theme-selected');
}); });
try {
themePopup.querySelector("button#" + get_theme()).classList.add('theme-selected'); themePopup.querySelector("button#" + get_theme()).classList.add('theme-selected');
} catch (e) { }
} }
function hideThemes() { function hideThemes() {
@ -318,9 +320,9 @@ function playground_text(playground, hidden = true) {
var theme; var theme;
try { theme = localStorage.getItem('mdbook-theme'); } catch (e) { } try { theme = localStorage.getItem('mdbook-theme'); } catch (e) { }
if (theme === null || theme === undefined) { if (theme === null || theme === undefined) {
return default_theme; return default_theme.replace(/\W+/g, '_').toLowerCase();
} else { } else {
return theme; return theme.replace(/\W+/g, '_').toLowerCase();
} }
} }
@ -331,13 +333,17 @@ function playground_text(playground, hidden = true) {
stylesheets.ayuHighlight.disabled = true; stylesheets.ayuHighlight.disabled = true;
stylesheets.tomorrowNight.disabled = false; stylesheets.tomorrowNight.disabled = false;
stylesheets.highlight.disabled = true; stylesheets.highlight.disabled = true;
ace_theme = "ace/theme/tomorrow_night"; ace_theme = "ace/theme/tomorrow_night";
} else if (theme == 'ayu') { } else if (theme == 'ayu') {
stylesheets.ayuHighlight.disabled = false; stylesheets.ayuHighlight.disabled = false;
stylesheets.tomorrowNight.disabled = true; stylesheets.tomorrowNight.disabled = true;
stylesheets.highlight.disabled = true; stylesheets.highlight.disabled = true;
ace_theme = "ace/theme/tomorrow_night"; 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 { } else {
stylesheets.ayuHighlight.disabled = true; stylesheets.ayuHighlight.disabled = true;
stylesheets.tomorrowNight.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) { if (store) {
try { localStorage.setItem('mdbook-theme', theme); } catch (e) { } try { localStorage.setItem('mdbook-theme', selectedTheme); } catch (e) { }
} }
try {
html.classList.remove( previousTheme ); html.classList.remove( previousTheme );
html.classList.add(theme); html.classList.add( selectedTheme );
} catch (e) { }
updateThemeSelected(); updateThemeSelected();
} }
// Sanitize theme id names
themePopup.querySelectorAll("button").forEach(e=>{e.id=e.id.replace(/\W+/g, '_').toLowerCase();});
// Set theme // Set theme
var theme = get_theme(); var theme = get_theme();

View File

@ -59,6 +59,7 @@
<script> <script>
var path_to_root = "{{ path_to_root }}"; var path_to_root = "{{ path_to_root }}";
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "{{ preferred_dark_theme }}" : "{{ default_theme }}"; var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "{{ preferred_dark_theme }}" : "{{ default_theme }}";
default_theme = default_theme.replace(/\W+/g, '_').toLowerCase();
</script> </script>
<!-- Work around some values being stored in localStorage wrapped in quotes --> <!-- Work around some values being stored in localStorage wrapped in quotes -->
@ -83,8 +84,10 @@
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { } try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
if (theme === null || theme === undefined) { theme = default_theme; } if (theme === null || theme === undefined) { theme = default_theme; }
var html = document.querySelector('html'); var html = document.querySelector('html');
html.classList.remove('{{ default_theme }}') try {
html.classList.add(theme); html.classList.remove('{{ default_theme }}');
html.classList.add(theme.replace(/\W+/g, '_').toLowerCase());
} catch(e) { }
var body = document.querySelector('body'); var body = document.querySelector('body');
body.classList.remove('no-js') body.classList.remove('no-js')
body.classList.add('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="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="navy">Navy</button></li>
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</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> </ul>
{{#if search_enabled}} {{#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"> <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">

View File

@ -9,6 +9,8 @@ edition = "2018"
[output.html] [output.html]
mathjax-support = true mathjax-support = true
additional-css = ["orange.css"]
additional-theme = ["Orange"]
[output.html.playground] [output.html.playground]
editable = true editable = true

39
test_book/orange.css Normal file
View File

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