Add dark mode

2 files changed, 38 insertions, 4 deletions

diff --git a/static/fluoride.js b/static/fluoride.js
index 25ab4a3..6a1b5fb 100644
--- a/static/fluoride.js
+++ b/static/fluoride.js
@@ -1,8 +1,12 @@
 var actionIcons = {
 	"like": "/static/icons/star-o.png",
+	"dark-like": "/static/icons/dark-star-o.png",
 	"unlike": "/static/icons/liked.png",
+	"dark-unlike": "/static/icons/liked.png",
 	"retweet": "/static/icons/retweet.png",
-	"unretweet": "/static/icons/retweeted.png"
+	"dark-retweet": "/static/icons/dark-retweet.png",
+	"unretweet": "/static/icons/retweeted.png",
+	"dark-unretweet": "/static/icons/retweeted.png"
 };
 
 var reverseActions = {
@@ -31,7 +35,11 @@ function http(method, url, success, error) {
 }
 
 function updateActionForm(id, f, action) {
-	f.children[1].src = actionIcons[action];
+	if (Array.from(document.body.classList).indexOf("dark") > -1) {
+		f.children[1].src = actionIcons["dark-" + action];
+	} else {
+		f.children[1].src = actionIcons[action];
+	}
 	f.action = "/" + action + "/" + id;
 	f.dataset.action = action;
 }
diff --git a/static/main.css b/static/main.css
index 553c9a2..acbca05 100644
--- a/static/main.css
+++ b/static/main.css
@@ -99,8 +99,8 @@
 }
 
 .status-action a:hover,
-.status-action a:hover i {
-	opacity: 0.8;
+.status-action input:hover {
+	opacity: 0.6;
 }
 
 .status-action a.status-time {
@@ -442,3 +442,29 @@
 	z-index: 3;
 	margin: 0 8px 0 8px;
 }
+
+.dark {
+	background-color: #222222;
+	background-image: none;
+	color: #eaeaea;
+}
+
+.dark a {
+	color: #81a2be;
+}
+
+.dark .status-action a {
+	color: #999999;
+}
+
+.dark #post-content {
+	background-color: #333333;
+	border: 1px solid #444444;
+	color: #eaeaea;
+}
+
+.dark #reply-popup,
+.dark #reply-to-popup {
+	background-color: #222222;
+	border-color: #444444;
+}