add night mode

3 files changed, 28 insertions, 1 deletions

diff --git a/css/read.css b/css/read.css
index bc795e3..a4851ce 100644
--- a/css/read.css
+++ b/css/read.css
@@ -80,7 +80,7 @@
 		right : 32px;
 	}
 	.toolbar {
-		width : 64px;
+		width : 96px;
 	}
 }
 
diff --git a/js/read.js b/js/read.js
index ccffef4..6ba8a92 100644
--- a/js/read.js
+++ b/js/read.js
@@ -118,3 +118,25 @@ function save_and_close() {
 			window.location = "index.php";
 		});
 }
+
+function invert() {
+	localStorage["night_mode"] = localStorage["night_mode"] == "0" ? 1 : 0;
+
+	apply_night_mode();
+}
+
+function apply_night_mode() {
+	if (localStorage["night_mode"] == "1") {
+		window.book.setStyle("background", "black");
+		window.book.setStyle("color", "#ccc");
+
+		$("body").css("background", "black");
+
+	} else {
+		window.book.setStyle("background", "white");
+		window.book.setStyle("color", "black");
+
+		$("body").css("background", "white");
+
+	}
+}
diff --git a/read.html b/read.html
index 345976c..fdd66ee 100644
--- a/read.html
+++ b/read.html
@@ -125,6 +125,10 @@
 			<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
 		</button>
 
+		<button class="btn btn-default btn-xs" onclick="invert()">
+			<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
+		</button>
+
 		<button class="btn btn-default btn-xs hidden-xs" onclick="zoom(2)">
 			<span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
 		</button>
@@ -185,6 +189,7 @@
 		//styles: { fontSize: '24px', lineHeight: '130%', fontFamily: 'Georgia' }
 
 		window.book = book;
+		apply_night_mode();
 
 		var rendered = book.renderTo("reader");