Add native themeing to QML (where possible)

resources/qml/TimelineView.qml

@@ -12,8 +12,9 @@ import "./delegates"
 Rectangle {
 	anchors.fill: parent
 
-	SystemPalette { id: colors; colorGroup: SystemPalette.Active }
+	property var colors: currentActivePalette
-	SystemPalette { id: inactiveColors; colorGroup: SystemPalette.Disabled }
+	property var systemInactive: SystemPalette { colorGroup: SystemPalette.Disabled }
+	property var inactiveColors: currentInactivePalette ? currentInactivePalette : systemInactive
 	property int avatarSize: 32
 
 	color: colors.window

resources/qml/delegates/TimelineRow.qml

@@ -1,5 +1,5 @@
 import QtQuick 2.6
-import QtQuick.Controls 2.1
+import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.2
 import QtGraphicalEffects 1.0
 import QtQuick.Window 2.2
@@ -48,8 +48,12 @@ RowLayout {
 		id: replyButton
 		flat: true
 		Layout.preferredHeight: 16
-		ToolTip.visible: hovered
+
-		ToolTip.text: qsTr("Reply")
+		ToolTip {
+			visible: replyButton.hovered
+			text: qsTr("Reply")
+			palette: colors
+		}
 
 		// disable background, because we don't want a border on hover
 		background: Item {
@@ -74,8 +78,12 @@ RowLayout {
 		id: optionsButton
 		flat: true
 		Layout.preferredHeight: 16
-		ToolTip.visible: hovered
+
-		ToolTip.text: qsTr("Options")
+		ToolTip {
+			visible: optionsButton.hovered
+			text: qsTr("Options")
+			palette: colors
+		}
 
 		// disable background, because we don't want a border on hover
 		background: Item {
@@ -98,6 +106,7 @@ RowLayout {
 		Menu {
 			y: optionsButton.height
 			id: contextMenu
+			palette: colors
 
 			MenuItem {
 				text: qsTr("Read receipts")
@@ -127,13 +136,16 @@ RowLayout {
 		text: model.timestamp.toLocaleTimeString("HH:mm")
 		color: inactiveColors.text
 
-		ToolTip.visible: ma.containsMouse
-		ToolTip.text: Qt.formatDateTime(model.timestamp, Qt.DefaultLocaleLongDate)
-
 		MouseArea{
 			id: ma
 			anchors.fill: parent
 			hoverEnabled: true
 		}
+
+		ToolTip {
+			visible: ma.containsMouse
+			text: Qt.formatDateTime(model.timestamp, Qt.DefaultLocaleLongDate)
+			palette: colors
+		}
 	}
 }

src/Utils.cpp

@@ -323,19 +323,29 @@ utils::linkifyMessage(const QString &body)
         return doc;
 }
 
-QByteArray escapeRawHtml(const QByteArray &data) {
+QByteArray
-      QByteArray buffer;
+escapeRawHtml(const QByteArray &data)
-      const size_t length = data.size();
+{
-      buffer.reserve(length);
+        QByteArray buffer;
-      for(size_t pos = 0; pos != length; ++pos) {
+        const size_t length = data.size();
-            switch(data.at(pos)) {
+        buffer.reserve(length);
-                  case '&':  buffer.append("&");      break;
+        for (size_t pos = 0; pos != length; ++pos) {
-                  case '<':  buffer.append("&lt;");       break;
+                switch (data.at(pos)) {
-                  case '>':  buffer.append("&gt;");       break;
+                case '&':
-                  default:   buffer.append(data.at(pos)); break;
+                        buffer.append("&amp;");
-            }
+                        break;
-      }
+                case '<':
-     return buffer;
+                        buffer.append("&lt;");
+                        break;
+                case '>':
+                        buffer.append("&gt;");
+                        break;
+                default:
+                        buffer.append(data.at(pos));
+                        break;
+                }
+        }
+        return buffer;
 }
 
 QString

src/timeline2/TimelineViewManager.cpp

@@ -3,13 +3,51 @@
 #include <QFileDialog>
 #include <QMetaType>
 #include <QMimeDatabase>
+#include <QPalette>
 #include <QQmlContext>
 #include <QStandardPaths>
 
+#include "ChatPage.h"
 #include "Logging.h"
 #include "MxcImageProvider.h"
+#include "UserSettingsPage.h"
 #include "dialogs/ImageOverlay.h"
 
+void
+TimelineViewManager::updateColorPalette()
+{
+        UserSettings settings;
+        if (settings.theme() == "light") {
+                QPalette lightActive(/*windowText*/ QColor("#333"),
+                                     /*button*/ QColor("#333"),
+                                     /*light*/ QColor(),
+                                     /*dark*/ QColor(220, 220, 220, 120),
+                                     /*mid*/ QColor(),
+                                     /*text*/ QColor("#333"),
+                                     /*bright_text*/ QColor(),
+                                     /*base*/ QColor("white"),
+                                     /*window*/ QColor("white"));
+                view->rootContext()->setContextProperty("currentActivePalette", lightActive);
+                view->rootContext()->setContextProperty("currentInactivePalette", lightActive);
+        } else if (settings.theme() == "dark") {
+                QPalette darkActive(/*windowText*/ QColor("#caccd1"),
+                                    /*button*/ QColor("#caccd1"),
+                                    /*light*/ QColor(),
+                                    /*dark*/ QColor(45, 49, 57, 120),
+                                    /*mid*/ QColor(),
+                                    /*text*/ QColor("#caccd1"),
+                                    /*bright_text*/ QColor(),
+                                    /*base*/ QColor("#202228"),
+                                    /*window*/ QColor("#202228"));
+                darkActive.setColor(QPalette::Highlight, QColor("#e7e7e9"));
+                view->rootContext()->setContextProperty("currentActivePalette", darkActive);
+                view->rootContext()->setContextProperty("currentInactivePalette", darkActive);
+        } else {
+                view->rootContext()->setContextProperty("currentActivePalette", QPalette());
+                view->rootContext()->setContextProperty("currentInactivePalette", nullptr);
+        }
+}
+
 TimelineViewManager::TimelineViewManager(QWidget *parent)
   : imgProvider(new MxcImageProvider())
 {
@@ -23,8 +61,14 @@ TimelineViewManager::TimelineViewManager(QWidget *parent)
         container = QWidget::createWindowContainer(view, parent);
         container->setMinimumSize(200, 200);
         view->rootContext()->setContextProperty("timelineManager", this);
+        updateColorPalette();
         view->engine()->addImageProvider("MxcImage", imgProvider);
         view->setSource(QUrl("qrc:///qml/TimelineView.qml"));
+
+        connect(dynamic_cast<ChatPage *>(parent),
+                &ChatPage::themeChanged,
+                this,
+                &TimelineViewManager::updateColorPalette);
 }
 
 void

src/timeline2/TimelineViewManager.h

@@ -71,6 +71,7 @@ public slots:
         void initWithMessages(const std::map<QString, mtx::responses::Timeline> &msgs);
 
         void setHistoryView(const QString &room_id);
+        void updateColorPalette();
 
         void queueTextMessage(const QString &msg);
         void queueReplyMessage(const QString &reply, const RelatedInfo &related);