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

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

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

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,

src/theme/book.js

@@ -102,7 +102,8 @@ $( document ).ready(function() {
                 .append($('<div class="theme" id="light">Light <span class="default">(default)</span><div>'))
                 .append($('<div class="theme" id="rust">Rust</div>'))
                 .append($('<div class="theme" id="coal">Coal</div>'))
-                .append($('<div class="theme" id="navy">Navy</div>'));
+                .append($('<div class="theme" id="navy">Navy</div>'))
+                .append($('<div class="theme" id="ayu">Ayu</div>'));
 
 
             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);
         }

src/theme/index.hbs

@@ -20,6 +20,7 @@
 
         <link rel="stylesheet" href="highlight.css">
         <link rel="stylesheet" href="tomorrow-night.css">
+        <link rel="stylesheet" href="ayu-highlight.css">
 
         <!-- Custom theme -->
         {{#each additional_css}}

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<u8>,
     pub highlight_css: Vec<u8>,
     pub tomorrow_night_css: Vec<u8>,
+    pub ayu_highlight_css: Vec<u8>,
     pub highlight_js: Vec<u8>,
     pub clipboard_js: Vec<u8>,
     pub jquery: Vec<u8>,
@@ -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
     }
 }

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'

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 {

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

src/theme/stylus/themes/index.styl

@@ -2,3 +2,4 @@
 @import 'coal'
 @import 'navy'
 @import 'rust'
+@import 'ayu'

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

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

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