From 44efc65c639b34f2b3c010a38f63b1bbc895de6c Mon Sep 17 00:00:00 2001 From: Cldfire Date: Tue, 6 Jun 2017 16:35:44 -0400 Subject: [PATCH] Add `Ayu` theme Also adds the a new variable, `$inline-code-color`, to base.styl. The `Ayu` theme needed this to change the text color of inline code. --- src/renderer/html_handlebars/hbs_renderer.rs | 1 + src/theme/ayu-highlight.css | 71 +++++++++++ src/theme/book.css | 123 +++++++++++++++++++ src/theme/book.js | 9 +- src/theme/index.hbs | 1 + src/theme/mod.rs | 9 ++ src/theme/stylus/themes/ayu.styl | 30 +++++ src/theme/stylus/themes/base.styl | 1 + src/theme/stylus/themes/coal.styl | 2 + src/theme/stylus/themes/index.styl | 1 + src/theme/stylus/themes/light.styl | 2 + src/theme/stylus/themes/navy.styl | 2 + src/theme/stylus/themes/rust.styl | 2 + 13 files changed, 253 insertions(+), 1 deletion(-) create mode 100644 src/theme/ayu-highlight.css create mode 100644 src/theme/stylus/themes/ayu.styl diff --git a/src/renderer/html_handlebars/hbs_renderer.rs b/src/renderer/html_handlebars/hbs_renderer.rs index 3da67507..829188e7 100644 --- a/src/renderer/html_handlebars/hbs_renderer.rs +++ b/src/renderer/html_handlebars/hbs_renderer.rs @@ -177,6 +177,7 @@ impl Renderer for HtmlHandlebars { book.write_file("jquery.js", &theme.jquery)?; book.write_file("highlight.css", &theme.highlight_css)?; book.write_file("tomorrow-night.css", &theme.tomorrow_night_css)?; + book.write_file("ayu-highlight.css", &theme.ayu_highlight_css)?; book.write_file("highlight.js", &theme.highlight_js)?; book.write_file("clipboard.min.js", &theme.clipboard_js)?; book.write_file("_FontAwesome/css/font-awesome.css", theme::FONT_AWESOME)?; diff --git a/src/theme/ayu-highlight.css b/src/theme/ayu-highlight.css new file mode 100644 index 00000000..786063fc --- /dev/null +++ b/src/theme/ayu-highlight.css @@ -0,0 +1,71 @@ +/* +Based off of the Ayu theme +Original by Dempfi (https://github.com/dempfi/ayu) +*/ + +.hljs { + display: block; + overflow-x: auto; + background: #191f26; + color: #e6e1cf; + padding: 0.5em; +} + +.hljs-comment, +.hljs-quote, +.hljs-meta { + color: #5c6773; + font-style: italic; +} + +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-attr, +.hljs-regexp, +.hljs-link, +.hljs-selector-id, +.hljs-selector-class { + color: #ff7733; +} + +.hljs-number, +.hljs-builtin-name, +.hljs-literal, +.hljs-type, +.hljs-params { + color: #ffee99; +} + +.hljs-string, +.hljs-bullet { + color: #b8cc52; +} + +.hljs-title, +.hljs-built_in, +.hljs-section { + color: #ffb454; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-symbol { + color: #ff7733; +} + +.hljs-name { + color: #36a3d9; +} + +.hljs-tag { + color: #00568d; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/src/theme/book.css b/src/theme/book.css index b531b96f..970ae36e 100644 --- a/src/theme/book.css +++ b/src/theme/book.css @@ -398,6 +398,7 @@ table thead td { vertical-align: middle; padding: 0.1em 0.3em; border-radius: 3px; + color: #6e6b5e; } .light a:hover > .hljs { text-decoration: underline; @@ -516,6 +517,7 @@ table thead td { vertical-align: middle; padding: 0.1em 0.3em; border-radius: 3px; + color: #c5c8c6; } .coal a:hover > .hljs { text-decoration: underline; @@ -634,6 +636,7 @@ table thead td { vertical-align: middle; padding: 0.1em 0.3em; border-radius: 3px; + color: #c5c8c6; } .navy a:hover > .hljs { text-decoration: underline; @@ -752,6 +755,7 @@ table thead td { vertical-align: middle; padding: 0.1em 0.3em; border-radius: 3px; + color: #6e6b5e; } .rust a:hover > .hljs { text-decoration: underline; @@ -775,6 +779,125 @@ table thead td { .rust pre > .result { margin-top: 10px; } +.ayu { + color: #c5c5c5; + background-color: #0f1419; +/* Inline code */ +} +.ayu .content .header:link, +.ayu .content .header:visited { + color: #c5c5c5; + pointer: cursor; +} +.ayu .content .header:link:hover, +.ayu .content .header:visited:hover { + text-decoration: none; +} +.ayu .sidebar { + background-color: #14191f; + color: #c8c9db; +} +.ayu .chapter li { + color: #5c6773; +} +.ayu .chapter li a { + color: #c8c9db; +} +.ayu .chapter li .active, +.ayu .chapter li a:hover { +/* Animate color change */ + color: #ffb454; +} +.ayu .chapter .spacer { + background-color: #2d334f; +} +.ayu .menu-bar, +.ayu .menu-bar:visited, +.ayu .nav-chapters, +.ayu .nav-chapters:visited, +.ayu .mobile-nav-chapters, +.ayu .mobile-nav-chapters:visited { + color: #737480; +} +.ayu .menu-bar i:hover, +.ayu .nav-chapters:hover, +.ayu .mobile-nav-chapters i:hover { + color: #b7b9cc; +} +.ayu .mobile-nav-chapters i:hover { + color: #c8c9db; +} +.ayu .mobile-nav-chapters { + background-color: #14191f; +} +.ayu .content a:link, +.ayu a:visited, +.ayu a > .hljs { + color: #0096cf; +} +.ayu .theme-popup { + color: #c5c5c5; + background: #14191f; + border: 1px solid #5c6773; +} +.ayu .theme-popup .theme:hover { + background-color: #191f26; +} +.ayu .theme-popup .default { + color: #737480; +} +.ayu blockquote { + margin: 20px 0; + padding: 0 20px; + color: #c5c5c5; + background-color: #262933; + border-top: 0.1em solid #2f333f; + border-bottom: 0.1em solid #2f333f; +} +.ayu table td { + border-color: #182028; +} +.ayu table tbody tr:nth-child(2n) { + background: #141b22; +} +.ayu table thead { + background: #324354; +} +.ayu table thead td { + border: none; +} +.ayu table thead tr { + border: 1px #324354 solid; +} +.ayu :not(pre) > .hljs { + display: inline-block; + vertical-align: middle; + padding: 0.1em 0.3em; + border-radius: 3px; + color: #ffb454; +} +.ayu a:hover > .hljs { + text-decoration: underline; +} +.ayu pre { + position: relative; +} +.ayu pre > .buttons { + position: absolute; + right: 5px; + top: 5px; + color: #c8c9db; + cursor: pointer; +} +.ayu pre > .buttons :hover { + color: #ffb454; +} +.ayu pre > .buttons i { + margin-left: 8px; +} +.ayu pre > .result { + margin-top: 10px; +} @media only print { #sidebar, #menu-bar, diff --git a/src/theme/book.js b/src/theme/book.js index 206bd522..66ba550c 100644 --- a/src/theme/book.js +++ b/src/theme/book.js @@ -102,7 +102,8 @@ $( document ).ready(function() { .append($('
Light (default)
')) .append($('
Rust
')) .append($('
Coal
')) - .append($('')); + .append($('')) + .append($('
Ayu
')); popup.insertAfter(this); @@ -118,9 +119,15 @@ $( document ).ready(function() { function set_theme(theme) { if (theme == 'coal' || theme == 'navy') { + $("[href='ayu-highlight.css']").prop('disabled', true); $("[href='tomorrow-night.css']").prop('disabled', false); $("[href='highlight.css']").prop('disabled', true); + } else if (theme == 'ayu') { + $("[href='ayu-highlight.css']").prop('disabled', false); + $("[href='tomorrow-night.css']").prop('disabled', true); + $("[href='highlight.css']").prop('disabled', true); } else { + $("[href='ayu-highlight.css']").prop('disabled', true); $("[href='tomorrow-night.css']").prop('disabled', true); $("[href='highlight.css']").prop('disabled', false); } diff --git a/src/theme/index.hbs b/src/theme/index.hbs index a4705884..4e90b122 100644 --- a/src/theme/index.hbs +++ b/src/theme/index.hbs @@ -20,6 +20,7 @@ + {{#each additional_css}} diff --git a/src/theme/mod.rs b/src/theme/mod.rs index 0ac4ec42..3717604e 100644 --- a/src/theme/mod.rs +++ b/src/theme/mod.rs @@ -10,6 +10,7 @@ pub static JS: &'static [u8] = include_bytes!("book.js"); pub static HIGHLIGHT_JS: &'static [u8] = include_bytes!("highlight.js"); pub static TOMORROW_NIGHT_CSS: &'static [u8] = include_bytes!("tomorrow-night.css"); pub static HIGHLIGHT_CSS: &'static [u8] = include_bytes!("highlight.css"); +pub static AYU_HIGHLIGHT_CSS: &'static [u8] = include_bytes!("ayu-highlight.css"); pub static JQUERY: &'static [u8] = include_bytes!("jquery-2.1.4.min.js"); pub static CLIPBOARD_JS: &'static [u8] = include_bytes!("clipboard.min.js"); pub static FONT_AWESOME: &'static [u8] = include_bytes!("_FontAwesome/css/font-awesome.min.css"); @@ -36,6 +37,7 @@ pub struct Theme { pub js: Vec, pub highlight_css: Vec, pub tomorrow_night_css: Vec, + pub ayu_highlight_css: Vec, pub highlight_js: Vec, pub clipboard_js: Vec, pub jquery: Vec, @@ -52,6 +54,7 @@ impl Theme { js: JS.to_owned(), highlight_css: HIGHLIGHT_CSS.to_owned(), tomorrow_night_css: TOMORROW_NIGHT_CSS.to_owned(), + ayu_highlight_css: AYU_HIGHLIGHT_CSS.to_owned(), highlight_js: HIGHLIGHT_JS.to_owned(), clipboard_js: CLIPBOARD_JS.to_owned(), jquery: JQUERY.to_owned(), @@ -114,6 +117,12 @@ impl Theme { let _ = f.read_to_end(&mut theme.tomorrow_night_css); } + // ayu-highlight.css + if let Ok(mut f) = File::open(&src.join("ayu-highlight.css")) { + theme.ayu_highlight_css.clear(); + let _ = f.read_to_end(&mut theme.ayu_highlight_css); + } + theme } } diff --git a/src/theme/stylus/themes/ayu.styl b/src/theme/stylus/themes/ayu.styl new file mode 100644 index 00000000..fb79dd8b --- /dev/null +++ b/src/theme/stylus/themes/ayu.styl @@ -0,0 +1,30 @@ +$theme-name = 'ayu' + +$bg = #0f1419 +$fg = #c5c5c5 + +$sidebar-bg = #14191f +$sidebar-fg = #c8c9db +$sidebar-non-existant = #5c6773 +$sidebar-active = #ffb454 +$sidebar-spacer = #2d334f + +$icons = #737480 +$icons-hover = #b7b9cc + +$links = #0096cf + +$inline-code-color = #ffb454 + +$theme-popup-bg = #14191f +$theme-popup-border = #5c6773 +$theme-hover = #191f26 + +$quote-bg = #262933 +$quote-border = lighten($quote-bg, 5%) + +$table-border-color = lighten($bg, 5%) +$table-header-bg = lighten($bg, 20%) +$table-alternate-bg = lighten($bg, 3%) + +@import 'base' diff --git a/src/theme/stylus/themes/base.styl b/src/theme/stylus/themes/base.styl index 9538906b..9bc90568 100644 --- a/src/theme/stylus/themes/base.styl +++ b/src/theme/stylus/themes/base.styl @@ -105,6 +105,7 @@ vertical-align: middle; padding: 0.1em 0.3em; border-radius: 3px; + color: $inline-code-color; } a:hover > .hljs { diff --git a/src/theme/stylus/themes/coal.styl b/src/theme/stylus/themes/coal.styl index 8864d3c2..82119b1b 100644 --- a/src/theme/stylus/themes/coal.styl +++ b/src/theme/stylus/themes/coal.styl @@ -14,6 +14,8 @@ $icons-hover = #b3c0cc $links = #2b79a2 +$inline-code-color = #c5c8c6; + $theme-popup-bg = #141617 $theme-popup-border = #43484d $theme-hover = #1f2124 diff --git a/src/theme/stylus/themes/index.styl b/src/theme/stylus/themes/index.styl index f364b5aa..be06b6fc 100644 --- a/src/theme/stylus/themes/index.styl +++ b/src/theme/stylus/themes/index.styl @@ -2,3 +2,4 @@ @import 'coal' @import 'navy' @import 'rust' +@import 'ayu' diff --git a/src/theme/stylus/themes/light.styl b/src/theme/stylus/themes/light.styl index 05cbb7f9..f6495b70 100644 --- a/src/theme/stylus/themes/light.styl +++ b/src/theme/stylus/themes/light.styl @@ -14,6 +14,8 @@ $icons-hover = #333333 $links = #4183c4 +$inline-code-color = #6e6b5e; + $theme-popup-bg = #fafafa $theme-popup-border = #cccccc $theme-hover = #e6e6e6 diff --git a/src/theme/stylus/themes/navy.styl b/src/theme/stylus/themes/navy.styl index 7a761965..826f8fc2 100644 --- a/src/theme/stylus/themes/navy.styl +++ b/src/theme/stylus/themes/navy.styl @@ -14,6 +14,8 @@ $icons-hover = #b7b9cc $links = #2b79a2 +$inline-code-color = #c5c8c6; + $theme-popup-bg = #161923 $theme-popup-border = #737480 $theme-hover = #282e40 diff --git a/src/theme/stylus/themes/rust.styl b/src/theme/stylus/themes/rust.styl index a44915d9..12c7ed42 100644 --- a/src/theme/stylus/themes/rust.styl +++ b/src/theme/stylus/themes/rust.styl @@ -14,6 +14,8 @@ $icons-hover = #262625 $links = #2b79a2 +$inline-code-color = #6e6b5e; + $theme-popup-bg = #e1e1db $theme-popup-border = #b38f6b $theme-hover = #99908a