From 37b68c41f7224f9fd92eb4548cacee9b295cfd7c Mon Sep 17 00:00:00 2001
From: Mathieu David <mathieudavid@mathieudavid.org>
Date: Fri, 11 Sep 2015 01:16:29 +0200
Subject: [PATCH] Theme toggle button

---
 src/theme/book.css  | 28 ++++++++++++++++++++++++++++
 src/theme/book.js   | 20 ++++++++++++++++++++
 src/theme/index.hbs |  3 ++-
 3 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/src/theme/book.css b/src/theme/book.css
index 31b874f5..eb8e32b8 100644
--- a/src/theme/book.css
+++ b/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;
+    }
+
 }
 
 
diff --git a/src/theme/book.js b/src/theme/book.js
index 8a78d364..c14c5cb2 100644
--- a/src/theme/book.js
+++ b/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);
+            });
+        }
+
+    });
+
 });
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
index dbbf078d..cdbccbc4 100644
--- a/src/theme/index.hbs
+++ b/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>