Theme toggle button

src/theme/book.css

@@ -130,6 +130,10 @@ html, body {
         transition: color 0.5s;
     }
 
+    .menu-bar .left-buttons {
+        float: left;
+    }
+
     .menu-bar .right-buttons {
         float: right;
     }
@@ -226,6 +230,30 @@ html, body {
     .next {
         right: 0;
     }
+
+
+    /* Theme Popup */
+    .theme-popup {
+        position: fixed;
+        left: -40px;
+
+        border: 1px solid #fafafa;
+        border-radius: 4px;
+
+        font-size: 0.7em;
+    }
+
+    .theme-popup .theme {
+        margin: 0;
+        padding: 2px 10px;
+        line-height: 25px;
+        white-space: nowrap;
+    }
+
+    .theme-popup .theme:hover {
+        background-color: #fafafa;
+    }
+
 }
 
 

src/theme/book.js

@@ -37,4 +37,24 @@ $( 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="dark">Dark</div>'));
+
+
+            $(this).append(popup);
+
+            $('.theme').click(function(){
+                var theme = $(this).attr('id');
+                $('body').removeClass().addClass(theme);
+            });
+        }
+
+    });
+
 });

src/theme/index.hbs

@@ -31,7 +31,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>