Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add additional-theme option #2059

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/config.rs
Original file line number Diff line number Diff line change
Expand Up @@ -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>,
Expand Down Expand Up @@ -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(),
Expand Down Expand Up @@ -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"

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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"]
"#;

Expand All @@ -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()
};
Expand Down
12 changes: 12 additions & 0 deletions src/renderer/html_handlebars/hbs_renderer.rs
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
30 changes: 21 additions & 9 deletions src/theme/book.js
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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();
}
}

Expand All @@ -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;
Expand All @@ -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();

Expand Down
10 changes: 8 additions & 2 deletions src/theme/index.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand All @@ -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');
Expand Down Expand Up @@ -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">
Expand Down
2 changes: 2 additions & 0 deletions test_book/book.toml
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ edition = "2018"

[output.html]
mathjax-support = true
additional-css = ["orange.css"]
additional-theme = ["Orange"]

[output.html.playground]
editable = true
Expand Down
39 changes: 39 additions & 0 deletions test_book/orange.css
Original file line number Diff line number Diff line change
@@ -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;
}