basic dark theme for reader view

minbrowser · May 1, 2016 · b38a6bd · b38a6bd
1 parent 84a8767
commit b38a6bd
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/reader/reader.js b/reader/reader.js
@@ -1,5 +1,14 @@
-//http://stackoverflow.com/a/2091331
+var hours = new Date().getHours();
+
+var isDarkTheme = false;
 
+if (hours > 21 || hours < 6) {
+	isDarkTheme = true;
+
+	document.body.classList.add("dark-theme")
+}
+
+//http://stackoverflow.com/a/2091331
 
 function getQueryVariable(variable) {
 	var query = window.location.search.substring(1);
@@ -15,8 +24,6 @@ function getQueryVariable(variable) {
 
 var backbutton = document.getElementById("backtoarticle");
 
-var emptyHTMLdocument = "<!DOCTYPE html><html><head></head><body></body></html>"
-
 function startReaderView(article) {
 
 	document.body.removeChild(parserframe);
@@ -46,6 +53,10 @@ function startReaderView(article) {
 
 	rframe.onload = function () {
 
+		if (isDarkTheme) {
+			rframe.contentDocument.body.classList.add("dark-theme");
+		}
+
 		requestAnimationFrame(function () {
 			rframe.height = rframe.contentDocument.body.querySelector(".reader-main").scrollHeight + "px";
 			requestAnimationFrame(function () {

diff --git a/reader/readerView.css b/reader/readerView.css
@@ -108,10 +108,11 @@ a {
 	color: inherit;
 	font-size: 1em;
 	text-decoration: none;
-	color: #777;
+	opacity: 0.6;
 }
 a:hover {
 	color: #2196F3;
+	opacity: 1.0;
 }
 figure {
 	max-width: 50%;
@@ -147,6 +148,13 @@ blockquote {
 	margin: 1.5em 0;
 }
 
+/* dark theme */
+
+body.dark-theme {
+	background-color: #000;
+	color: #fff;
+}
+
 /* site-specific styles */