From 3c6653a77b8951672ea169d175db154495a981fe Mon Sep 17 00:00:00 2001 From: r Date: Sun, 12 Jan 2020 17:16:57 +0000 Subject: Add dark mode --- static/fluoride.js | 12 ++++++++++-- static/main.css | 30 ++++++++++++++++++++++++++++-- 2 files changed, 38 insertions(+), 4 deletions(-) (limited to 'static') 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; +} -- cgit v1.2.3