Merge pull request #48 from mdinger/dark_theme

Multiple themes

src/renderer/html_handlebars/hbs_renderer.rs

@@ -186,6 +186,8 @@ impl Renderer for HtmlHandlebars {
         // syntax highlighting
         let mut highlight_css = try!(File::create(book.get_dest().join("highlight.css")));
         try!(highlight_css.write_all(&theme.highlight_css));
+        let mut tomorrow_night_css = try!(File::create(book.get_dest().join("tomorrow-night.css")));
+        try!(tomorrow_night_css.write_all(&theme.tomorrow_night_css));
         let mut highlight_js = try!(File::create(book.get_dest().join("highlight.js")));
         try!(highlight_js.write_all(&theme.highlight_js));
 

src/theme/book.css

@@ -4,6 +4,146 @@ html, body {
 }
 
 @media only screen {
+    /* Light theme */
+    .light .sidebar {
+        border-right: 1px solid rgba(0, 0, 0, 0.07);
+        background-color: #fafafa;
+        color: #364149;
+    }
+    .light .page-wrapper {
+        background: none repeat scroll 0 0 #FFF;
+    }
+    .light .chapter li .active,
+    .light .chapter li a:hover {
+        /* Animate color change */
+        color: #008cff;
+    }
+    .light .menu-bar,
+    .light .nav-chapters {
+        color: #CCC;
+    }
+    .light .chapter li a,
+    .light .menu-bar i:hover,
+    .light .nav-chapters:hover {
+        /* Animate color change */
+        color: #333;
+    }
+    .light .content a {
+        color: #4183c4;
+    }
+    /* Theme changer */
+    .light .theme-popup {
+        background: #fafafa;
+        border: 1px solid #ccc;
+    }
+    .light .theme-popup .theme:hover {
+        background-color: #e6e6e6;
+    }
+
+    /* Coal theme */
+    .coal {
+        color: #98a3ad;
+        background-color: #141617;
+    }
+    .coal .sidebar {
+        background-color: #292c2f;
+        color: #a1adb8;
+    }
+    .coal .chapter li .active,
+    .coal .chapter li a:hover {
+        /* Animate color change */
+        color: #3473ad;
+    }
+    .coal .menu-bar,
+    .coal .nav-chapters {
+        color: #43484d;
+    }
+    .coal .chapter li a,
+    .coal .menu-bar i:hover,
+    .coal .nav-chapters:hover {
+        color: #b3c0cc;
+    }
+    .coal .content a {
+        color: #2b79a2;
+    }
+    /* Theme changer */
+    .coal .theme-popup {
+        background: #141617;
+        border: 1px solid #43484d;
+    }
+    .coal .theme-popup .theme:hover {
+        background-color: #1f2124;
+    }
+    /* Dark blue colored theme */
+    .navy {
+        background-color: #161923;
+        color: #bcbdd0;
+    }
+    .navy .sidebar {
+        background-color: #282d3f;
+        color: #c8c9db;
+    }
+    .navy .chapter li .active,
+    .navy .chapter li a:hover {
+        /* Animate color change */
+        color: #2b79a2;
+    }
+    .navy .menu-bar,
+    .navy .nav-chapters {
+        color: #737480;
+    }
+    .navy .chapter li a,
+    .navy .menu-bar i:hover,
+    .navy .nav-chapters:hover {
+        color: #b7b9cc;
+    }
+    .navy .content a {
+        color: #2b79a2;
+    }
+    /* Theme changer */
+    .navy .theme-popup {
+        background: #161923;
+        border: 1px solid #737480;
+    }
+    .navy .theme-popup .theme:hover {
+        background-color: #282e40;
+    }
+    /* Rust theme */
+    .rust {
+        background-color: #e1e1db;
+        color: #262625;
+    }
+    .rust .sidebar {
+        background-color: #3b2e2a;
+        color: #c8c9db;
+    }
+    .rust .chapter li .active,
+    .rust .chapter li a:hover {
+        /* Animate color change */
+        color: #e69f67;
+    }
+    .rust .menu-bar,
+    .rust .nav-chapters {
+        color: #737480;
+    }
+    .rust .chapter li a {
+        color: #bfbfba;
+    }
+    .rust .menu-bar i:hover,
+    .rust .nav-chapters:hover {
+        color: #262625;
+    }
+    .rust .content a {
+        color: #2b79a2;
+    }
+    /* Theme changer */
+    .rust .theme-popup {
+        background: #e1e1db;
+        border: 1px solid #b38f6b;
+    }
+    .rust .theme-popup .theme:hover {
+        background-color: #99908a;
+    }
     .sidebar {
         position: absolute;
         left: 0;
@@ -11,13 +151,10 @@ html, body {
         bottom: 0;
         width: 300px;
         overflow-y: auto;
-        border-right: 1px solid rgba(0, 0, 0, 0.07);
         padding: 10px 10px;
         font-size: 14px;
         box-sizing: border-box;
         -webkit-overflow-scrolling: touch;
-        background-color: #fafafa;
-        color: #364149;
 
         /* Animation: slide away */
         -webkit-transition: left 0.5s; /* Safari */
@@ -34,7 +171,6 @@ html, body {
         top: 0;
         bottom: 0;
         box-sizing: border-box;
-        background: none repeat scroll 0 0 #FFF;
         -webkit-overflow-scrolling: touch;
 
         min-height: 100%;
@@ -82,23 +218,12 @@ html, body {
         white-space: nowrap;
     }
 
-    .chapter li {
-        color: #AAA;
-    }
-
     .chapter li a {
-        color: #333;
         padding: 5px 0;
         text-decoration: none;
     }
 
-    .chapter li .active {
-        color: #008cff;
-    }
-
     .chapter li a:hover {
-        /* Animate color change */
-        color: #008cff;
         text-decoration: none;
     }
 
@@ -116,7 +241,6 @@ html, body {
     .menu-bar {
         position: relative;
         height: 50px;
-        color: #CCC;
     }
 
     .menu-bar i {
@@ -130,13 +254,12 @@ html, body {
         transition: color 0.5s;
     }
 
-    .menu-bar .right-buttons {
+    .menu-bar .left-buttons {
-        float: right;
+        float: left;
     }
 
-    .menu-bar :hover {
+    .menu-bar .right-buttons {
-        /* Animate color change */
+        float: right;
-        color: #333;
     }
 
     .menu-bar i:hover {
@@ -144,7 +267,6 @@ html, body {
     }
 
     .menu-title {
-        color: #7E7E7E;
         display: inline-block;
         font-weight: 200;
         font-size: 20px;
@@ -165,7 +287,6 @@ html, body {
     }
 
     .menu-bar:hover .menu-title {
-        color: #7E7E7E;
         opacity: 1;
     }
 
@@ -180,7 +301,6 @@ html, body {
     /* Content */
 
     .content a {
-        color: #4183c4;
         text-decoration: none;
     }
 
@@ -190,7 +310,6 @@ html, body {
 
     /* Nav icons */
     .nav-chapters {
-        color: #CCC;
         font-size: 40px;
         text-align: center;
         text-decoration: none;
@@ -215,7 +334,6 @@ html, body {
     .mobile-nav-chapters { display: none; }
 
     .nav-chapters:hover {
-        color: #333;
         text-decoration: none;
     }
 
@@ -226,6 +344,24 @@ html, body {
     .next {
         right: 0;
     }
+
+
+    /* Theme Popup */
+    .theme-popup {
+        position: fixed;
+        left: -40px;
+
+        border-radius: 4px;
+
+        font-size: 0.7em;
+    }
+
+    .theme-popup .theme {
+        margin: 0;
+        padding: 2px 10px;
+        line-height: 25px;
+        white-space: nowrap;
+    }
 }
 
 
@@ -242,12 +378,43 @@ html, body {
 /* Fix the navigation arrows that collapsed with the text on smaller screens */
 
 @media only screen and (max-width: 1250px) {
+    /* Light theme */
+    .light .mobile-nav-chapters {
+        background-color: #E0E0E0;
+        color: #999;
+    }
+    .light .mobile-nav-chapters i:hover {
+        color: #333;
+    }
+    /* Coal theme */
+    .coal .mobile-nav-chapters {
+        background-color: #212426;
+        color: #43484d;
+    }
+    .coal .mobile-nav-chapters i:hover {
+        color: #b3c0cc;
+    }
+    /* Navy theme */
+    .navy .mobile-nav-chapters {
+        background-color: #242838;
+        color: #737480;
+    }
+    .navy .mobile-nav-chapters i:hover {
+        color: #b7b9cc;
+    }
+    /* Rust theme */
+    .rust .mobile-nav-chapters {
+        background-color: #4d413d;
+        color: #737480;
+    }
+    .rust .mobile-nav-chapters i:hover {
+        color: #b7b9cc;
+    }
     .nav-chapters {
         display: none;
     }
 
     .mobile-nav-chapters {
-        color: #CCC;
         font-size: 40px;
         text-align: center;
         text-decoration: none;
@@ -263,8 +430,6 @@ html, body {
         margin-bottom: 50px;
 
         border-radius: 5px;
-        background-color: #E0E0E0;
-        color: #999;
     }
 
     .next {

src/theme/book.js

@@ -3,6 +3,12 @@ $( document ).ready(function() {
     // url
     var url = window.location.pathname;
 
+    // Set theme
+    var theme = localStorage.getItem('theme');
+    if (theme == null) { theme = 'light'; }
+
+    set_theme(theme);
+
     // Syntax highlighting Configuration
     hljs.configure({
         tabReplace: '    ', // 4 spaces
@@ -37,4 +43,40 @@ $( document ).ready(function() {
         window.print();
     }
 
+    // Theme button
+    $("#theme-toggle").click(function(){
+        if($('.theme-popup').length) {
+            $('.theme-popup').remove();
+        } else {
+            var popup = $('<div class="theme-popup"></div>')
+                .append($('<div class="theme" id="light">Light (default)<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>'));
+
+
+            $(this).append(popup);
+
+            $('.theme').click(function(){
+                var theme = $(this).attr('id');
+
+                set_theme(theme)
+            });
+        }
+
+    });
+
+    function set_theme(theme) {
+        if (theme == 'coal' || theme == 'navy') {
+            $("[href='tomorrow-night.css']").prop('disabled', false);
+            $("[href='highlight.css']").prop('disabled', true);
+        } else {
+            $("[href='tomorrow-night.css']").prop('disabled', true);
+            $("[href='highlight.css']").prop('disabled', false);
+        }
+
+        localStorage.setItem('theme', theme);
+
+        $('body').removeClass().addClass(theme);
+    }
 });

src/theme/index.hbs

@@ -16,6 +16,7 @@
         <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 
         <link rel="stylesheet" href="highlight.css">
+        <link rel="stylesheet" href="tomorrow-night.css">
 
         <!-- MathJax -->
         <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
@@ -31,7 +32,8 @@
             <div class="page">
                 <div id="menu-bar" class="menu-bar">
                     <div class="left-buttons">
-                        <i id="sidebar-toggle" class="fa fa-bars left"></i>
+                        <i id="sidebar-toggle" class="fa fa-bars"></i>
+                        <i id="theme-toggle" class="fa fa-paint-brush"></i>
                     </div>
 
                     <h1 class="menu-title">{{ title }}</h1>

src/theme/mod.rs

@@ -8,6 +8,7 @@ pub static INDEX: &'static [u8] = include_bytes!("index.hbs");
 pub static CSS: &'static [u8] = include_bytes!("book.css");
 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 JQUERY: &'static [u8] = include_bytes!("jquery-2.1.4.min.js");
 pub static FONT_AWESOME: &'static [u8] = include_bytes!("_FontAwesome/css/font-awesome.min.css");
@@ -29,12 +30,13 @@ pub struct Theme {
     pub css: Vec<u8>,
     pub js: Vec<u8>,
     pub highlight_css: Vec<u8>,
+    pub tomorrow_night_css: Vec<u8>,
     pub highlight_js: Vec<u8>,
     pub jquery: Vec<u8>,
 }
 
 impl Theme {
-    pub fn new(src: &Path) -> Self{
+    pub fn new(src: &Path) -> Self {
 
         // Default theme
         let mut theme = Theme {
@@ -42,6 +44,7 @@ impl Theme {
             css: CSS.to_owned(),
             js: JS.to_owned(),
             highlight_css: HIGHLIGHT_CSS.to_owned(),
+            tomorrow_night_css: TOMORROW_NIGHT_CSS.to_owned(),
             highlight_js: HIGHLIGHT_JS.to_owned(),
             jquery: JQUERY.to_owned(),
         };
@@ -60,58 +63,39 @@ impl Theme {
         // Check for individual files if they exist
 
         // index.hbs
-        match File::open(&src.join("index.hbs")) {
+        if let Ok(mut f) = File::open(&src.join("index.hbs")) {
-            Ok(mut f) => {
             theme.index.clear(); // Reset the value, because read_to_string appends...
-                match f.read_to_end(&mut theme.index) {
+            let _ = f.read_to_end(&mut theme.index);
-                    _ => {}
-                };
-            },
-            _ => {},
         }
 
         // book.js
-        match File::open(&src.join("book.js")) {
+        if let Ok(mut f) = File::open(&src.join("book.js")) {
-            Ok(mut f) => {
             theme.js.clear();
-                match f.read_to_end(&mut theme.js){
+            let _ =  f.read_to_end(&mut theme.js);
-                    _ => {}
-                }
-            },
-            _ => {},
         }
 
         // book.css
-        match File::open(&src.join("book.css")) {
+        if let Ok(mut f) = File::open(&src.join("book.css")) {
-            Ok(mut f) => {
             theme.css.clear();
-                match f.read_to_end(&mut theme.css) {
+            let _ = f.read_to_end(&mut theme.css);
-                    _ => {}
-                }
-            },
-            _ => {},
         }
 
         // highlight.js
-        match File::open(&src.join("highlight.js")) {
+        if let Ok(mut f) = File::open(&src.join("highlight.js")) {
-            Ok(mut f) => {
             theme.highlight_js.clear();
-                match f.read_to_end(&mut theme.highlight_js) {
+            let _ = f.read_to_end(&mut theme.highlight_js);
-                    _ => {}
-                }
-            },
-            _ => {},
         }
 
         // highlight.css
-        match File::open(&src.join("highlight.css")) {
+        if let Ok(mut f) = File::open(&src.join("highlight.css")) {
-            Ok(mut f) => {
             theme.highlight_css.clear();
-                match f.read_to_end(&mut theme.highlight_css) {
+            let _ = f.read_to_end(&mut theme.highlight_css);
-                    _ => {}
         }
-            },
+
-            _ => {},
+        // tomorrow-night.css
+        if let Ok(mut f) = File::open(&src.join("tomorrow-night.css")) {
+            theme.tomorrow_night_css.clear();
+            let _ = f.read_to_end(&mut theme.tomorrow_night_css);
         }
 
         theme

src/theme/tomorrow-night.css

@@ -0,0 +1,96 @@
+/* Tomorrow Night Theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+/* Original theme - https://github.com/chriskempson/tomorrow-theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+
+/* Tomorrow Comment */
+.hljs-comment {
+  color: #969896;
+}
+
+/* Tomorrow Red */
+.hljs-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-regexp,
+.ruby .hljs-constant,
+.xml .hljs-tag .hljs-title,
+.xml .hljs-pi,
+.xml .hljs-doctype,
+.html .hljs-doctype,
+.css .hljs-id,
+.css .hljs-class,
+.css .hljs-pseudo {
+  color: #cc6666;
+}
+
+/* Tomorrow Orange */
+.hljs-number,
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-built_in,
+.hljs-literal,
+.hljs-params,
+.hljs-constant {
+  color: #de935f;
+}
+
+/* Tomorrow Yellow */
+.ruby .hljs-class .hljs-title,
+.css .hljs-rule .hljs-attribute {
+  color: #f0c674;
+}
+
+/* Tomorrow Green */
+.hljs-string,
+.hljs-value,
+.hljs-inheritance,
+.hljs-header,
+.hljs-name,
+.ruby .hljs-symbol,
+.xml .hljs-cdata {
+  color: #b5bd68;
+}
+
+/* Tomorrow Aqua */
+.hljs-title,
+.css .hljs-hexcolor {
+  color: #8abeb7;
+}
+
+/* Tomorrow Blue */
+.hljs-function,
+.python .hljs-decorator,
+.python .hljs-title,
+.ruby .hljs-function .hljs-title,
+.ruby .hljs-title .hljs-keyword,
+.perl .hljs-sub,
+.javascript .hljs-title,
+.coffeescript .hljs-title {
+  color: #81a2be;
+}
+
+/* Tomorrow Purple */
+.hljs-keyword,
+.javascript .hljs-function {
+  color: #b294bb;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #1d1f21;
+  color: #c5c8c6;
+  padding: 0.5em;
+  -webkit-text-size-adjust: none;
+}
+
+.coffeescript .javascript,
+.javascript .xml,
+.tex .hljs-formula,
+.xml .javascript,
+.xml .vbscript,
+.xml .css,
+.xml .hljs-cdata {
+  opacity: 0.5;
+}