Add a dark mode, fixes #7

html/content.css

@@ -10,6 +10,11 @@ body {
     font-weight: lighter;
 }
 
+body.nightmode {
+    background: #111;
+    color: #aaa;
+}
+
 h1 {
     font-weight: lighter;
     font-size: 1.4em;
@@ -24,6 +29,10 @@ h1 {
     display: block;
 }
 
+.nightmode #date {
+    border-bottom-color: #333;
+}
+
 .starred:after {
     content: "*";
 }
@@ -35,6 +44,10 @@ header p {
     font-size: 0.8em;
 }
 
+.nightmode header p {
+    color: #888;
+}
+
 a {
     color: inherit;
     text-decoration: none;

html/content.js

@@ -47,3 +47,8 @@ function setFont(font, size) {
     document.body.style.fontFamily = font;
     document.body.style.fontSize = size + "pt";
 }
+
+function setNightmode(nightmode) {
+    if(nightmode) document.body.className = "nightmode";
+    else document.body.className = "";
+}

qml/Content.qml

@@ -12,10 +12,12 @@ Item {
     property ApplicationWindow app
 
     property int textFontSize: 14
+    property bool nightmode
     property int scrollJump: 48
     property int pageJump: parent.height
     Layout.minimumWidth: 400
     onTextFontSizeChanged: webView.setDefaults()
+    onNightmodeChanged: webView.setDefaults()
 
     function scrollDown(jump) {
         if(!jump) {
@@ -60,6 +62,7 @@ Item {
             var defFont = ', system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande"';
             webView.runJavaScript("document.body.style.fontFamily = \"'" + fontLabel.font.family + "'" + defFont + "\";");
             webView.runJavaScript("document.body.style.fontSize = '" + content.textFontSize + "pt';");
+            webView.runJavaScript("setNightmode(" + (content.nightmode ? "true" : "false") + ")")
         }
 
 

qml/PostListItem.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls 1.3
 Item {
     property int textFontSize: 14
     property int smallfontSize: 11
+    property bool nightmode
 
     Component.onCompleted: fixFontSize()
     onTextFontSizeChanged: fixFontSize()
@@ -16,17 +17,15 @@ Item {
     height: column.height + 20
     width: parent.parent.parent.width
 
-    Rectangle {
+    Item {
         anchors.fill: parent
-        color: "transparent"
 
-        Rectangle {
+        Item {
             anchors.fill: parent
             anchors.leftMargin: 15
             anchors.rightMargin: 15
             anchors.topMargin: 10
             anchors.bottomMargin: 10
-            color: "transparent"
 
             Column {
                 id: column
@@ -38,7 +37,7 @@ Item {
                         text: feedTitle
                         font.pointSize: smallfontSize
                         textFormat: Text.PlainText
-                        color: "gray"
+                        color: nightmode ? "#888" : "gray"
                         wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                         renderType: Text.NativeRendering
                     }
@@ -46,14 +45,14 @@ Item {
                         text: date.toLocaleString(Qt.locale(), Locale.ShortFormat)
                         font.pointSize: smallfontSize
                         textFormat: Text.PlainText
-                        color: "gray"
+                        color: nightmode ? "#888" : "gray"
                         wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                         renderType: Text.NativeRendering
                     }
                 }
                 Label {
                     text: title
-                    color: read ? "gray" : "black"
+                    color: nightmode ? (read ? "#888" : "#aaa") : (read ? "gray" : "black")
                     font.pointSize: textFontSize
                     textFormat: Text.RichText
                     wrapMode: Text.WrapAtWordBoundaryOrAnywhere
@@ -64,7 +63,7 @@ Item {
                     text: excerpt
                     font.pointSize: smallfontSize
                     textFormat: Text.RichText
-                    color: "gray"
+                    color: nightmode ? "#888" : "gray"
                     wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                     renderType: Text.NativeRendering
                     width: parent.width
@@ -76,7 +75,7 @@ Item {
             anchors.top: parent.bottom
             width: parent.width
             height: 1
-            color: "lightgray"
+            color: nightmode ? "#222" : "lightgray"
         }
     }
 

qml/Sidebar.qml

@@ -11,6 +11,7 @@ ScrollView {
     property Content content
     property Post previousPost
     property int textFontSize: 14
+    property bool nightmode
 
     style: ScrollViewStyle {
         transientScrollBars: true
@@ -39,6 +40,7 @@ ScrollView {
         delegate: Component {
             PostListItem {
                 textFontSize: item.textFontSize
+                nightmode: app.nightmode
             }
         }
 
@@ -47,7 +49,7 @@ ScrollView {
             Rectangle {
                 width: listView.currentItem.width
                 height: listView.currentItem.height
-                color: "lightblue"
+                color: nightmode ? "#222" : "lightblue"
                 opacity: 0.5
                 y: listView.currentItem.y
             }

qml/TheMenuBar.qml

@@ -67,6 +67,12 @@ MenuBar {
     Menu {
         visible: menuBar.visible
         title: qsTr("View")
+        MenuItem {
+            text: qsTr("Night mode")
+            shortcut: "1"
+            onTriggered: app.toggleNightmode()
+        }
+
         MenuItem {
             text: qsTr("Zoom In")
             shortcut: "Ctrl++"

qml/main.qml

@@ -9,6 +9,7 @@ ApplicationWindow {
     id: app
     title: "FeedTheMonkey"
     visible: true
+    color: nightmode ? "#111" : "#eee"
 
     minimumWidth: 480
     minimumHeight: 320
@@ -26,6 +27,7 @@ ApplicationWindow {
     property int defaultTextFontSizeIndex: 3
     property int textFontSizeIndex: defaultTextFontSizeIndex
     property int textFontSize: fontSizes[textFontSizeIndex]
+    property bool nightmode: false
 
     Settings {
         id: settings
@@ -36,6 +38,7 @@ ApplicationWindow {
         property alias height: app.height
         property alias sidebarWidth: sidebar.width
         property alias textFontSizeIndex: app.textFontSizeIndex
+        property alias nightmode: app.nightmode
     }
 
     property TheMenuBar menu: TheMenuBar {
@@ -61,6 +64,10 @@ ApplicationWindow {
         }
     }
 
+    function toggleNightmode() {
+        app.nightmode = !app.nightmode
+    }
+
     function zoomIn() {
         if(textFontSizeIndex + 1 < fontSizes.length) {
             textFontSize = fontSizes[++textFontSizeIndex]
@@ -95,6 +102,9 @@ ApplicationWindow {
         case Qt.Key_k:
             sidebar.previous()
             break
+        case Qt.Key_1:
+            toggleNightmode()
+            break
         case Qt.Key_Home:
             content.scrollUp()
             break
@@ -133,6 +143,10 @@ ApplicationWindow {
         orientation: Qt.Horizontal
         visible: serverLogin.loggedIn()
         focus: true
+        handleDelegate: Rectangle {
+            width: 1
+            color: app.nightmode ? "#333" : "#aaa"
+        }
 
         Sidebar {
             id: sidebar
@@ -142,6 +156,7 @@ ApplicationWindow {
             Layout.minimumWidth: 200
             implicitWidth: 300
             textFontSize: app.textFontSize
+            nightmode: app.nightmode
         }
 
         Content {
@@ -151,6 +166,7 @@ ApplicationWindow {
             Layout.minimumWidth: 200
             implicitWidth: 624
             textFontSize: app.textFontSize
+            nightmode: app.nightmode
         }
 
         Keys.onPressed: keyPressed(event)