QML UI: attempt to add dark theme

This isn't great, yet, but a first step to show that this is possible
(and in doing so I found quite a few spots where the colors weren't
correctly propagating, yet).

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>

5 files changed, 32 insertions, 5 deletions

diff --git a/mobile-widgets/qml/DiveList.qml b/mobile-widgets/qml/DiveList.qml
index 22a0e78e5..f8c82835a 100644
--- a/mobile-widgets/qml/DiveList.qml
+++ b/mobile-widgets/qml/DiveList.qml
@@ -12,7 +12,7 @@ Kirigami.ScrollablePage {
 	objectName: "DiveList"
 	title: qsTr("Dive list")
 	background: Rectangle {
-		color: Kirigami.Theme.viewBackgroundColor
+		color: subsurfaceTheme.backgroundColor
 	}
 	width: subsurfaceTheme.columnWidth
 	property int credentialStatus: manager.credentialStatus
@@ -31,7 +31,7 @@ Kirigami.ScrollablePage {
 			checked: diveListView.currentIndex === model.index
 			width: parent.width
 			height: diveListEntry.height + Kirigami.Units.smallSpacing
-			backgroundColor: checked ? subsurfaceTheme.primaryColor : Kirigami.Theme.viewBackgroundColor
+			backgroundColor: checked ? subsurfaceTheme.primaryColor : subsurfaceTheme.backgroundColor
 			textColor: checked ? subsurfaceTheme.primaryTextColor : subsurfaceTheme.diveListTextColor
 
 			property real detailsOpacity : 0
diff --git a/mobile-widgets/qml/DownloadFromDiveComputer.qml b/mobile-widgets/qml/DownloadFromDiveComputer.qml
index 460fa151e..85a052692 100644
--- a/mobile-widgets/qml/DownloadFromDiveComputer.qml
+++ b/mobile-widgets/qml/DownloadFromDiveComputer.qml
@@ -137,7 +137,7 @@ Kirigami.Page {
 				depth: model.depth
 				selected: model.selected
 
-				backgroundColor: selectAll ? Kirigami.Theme.highlightColor : Kirigami.Theme.viewBackgroundColor
+				backgroundColor: selectAll ? subsurfaceTheme.darkPrimaryColor : subsurfaceTheme.backgroundColor
 
 				onClicked : {
 					console.log("Selecting index" + index);
diff --git a/mobile-widgets/qml/HintsTextEdit.qml b/mobile-widgets/qml/HintsTextEdit.qml
index 556b9380d..5bf57207f 100644
--- a/mobile-widgets/qml/HintsTextEdit.qml
+++ b/mobile-widgets/qml/HintsTextEdit.qml
@@ -66,7 +66,7 @@ TextField {
 			}
 		}
 		background: Rectangle {
-			color: Kirigami.Theme.viewBackgroundColor
+			color: subsurfaceTheme.backgroundColor
 			radius: 2
 			layer.enabled: true
 			layer.effect: DropShadow {
@@ -79,7 +79,7 @@ TextField {
 				color: Qt.rgba(0, 0, 0, 0.5)
 			}
 			Rectangle {
-				color: Kirigami.Theme.viewBackgroundColor
+				color: subsurfaceTheme.backgroundColor
 				width: Kirigami.Units.gridUnit
 				height: width
 				rotation: 45
diff --git a/mobile-widgets/qml/Log.qml b/mobile-widgets/qml/Log.qml
index 86082349a..7f65e3fbf 100644
--- a/mobile-widgets/qml/Log.qml
+++ b/mobile-widgets/qml/Log.qml
@@ -30,6 +30,7 @@ Kirigami.ScrollablePage {
 		delegate : Text {
 			width: logWindow.width
 			wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+			color: Kirigami.Theme.textColor
 			text : message
 		}
 	}
diff --git a/mobile-widgets/qml/main.qml b/mobile-widgets/qml/main.qml
index 22cbecb57..3f4fe17d1 100644
--- a/mobile-widgets/qml/main.qml
+++ b/mobile-widgets/qml/main.qml
@@ -267,6 +267,13 @@ Kirigami.ApplicationWindow {
 				}
 
 				Kirigami.Action {
+					text: qsTr("Switch to dark theme")
+					onTriggered: {
+						darkTheme()
+					}
+				}
+
+				Kirigami.Action {
 					text: qsTr("Theme information")
 					onTriggered: {
 						stackView.push(themetest)
@@ -327,6 +334,8 @@ Kirigami.ApplicationWindow {
 		subsurfaceTheme.primaryTextColor = "#ECECEC"
 		subsurfaceTheme.lightPrimaryColor = "#C5CAE9"
 		subsurfaceTheme.lightPrimaryTextColor = "#212121"
+		subsurfaceTheme.backgroundColor = "#eff0f1"
+		subsurfaceTheme.diveListTextColor = subsurfaceTheme.lightPrimaryTextColor
 	}
 
 	function pinkTheme() {
@@ -336,6 +345,19 @@ Kirigami.ApplicationWindow {
 		subsurfaceTheme.primaryTextColor = "#212121"
 		subsurfaceTheme.lightPrimaryColor = "#FFDDF4"
 		subsurfaceTheme.lightPrimaryTextColor = "#212121"
+		subsurfaceTheme.backgroundColor = "#eff0f1"
+		subsurfaceTheme.diveListTextColor = subsurfaceTheme.lightPrimaryTextColor
+	}
+
+	function darkTheme() {
+		subsurfaceTheme.darkPrimaryColor = "#303F9f"
+		subsurfaceTheme.darkPrimaryTextColor= "#ECECEC"
+		subsurfaceTheme.primaryColor = "#3F51B5"
+		subsurfaceTheme.primaryTextColor = "#ECECEC"
+		subsurfaceTheme.lightPrimaryColor = "#C5CAE9"
+		subsurfaceTheme.lightPrimaryTextColor = "#212121"
+		subsurfaceTheme.backgroundColor = "#000000"
+		subsurfaceTheme.diveListTextColor = subsurfaceTheme.primaryTextColor
 	}
 
 	QtObject {
@@ -351,12 +373,16 @@ Kirigami.ApplicationWindow {
 		property color lightPrimaryTextColor: "#212121"
 		property color contrastAccentColor: "#FF9800" // used for delete button
 
+		property color backgroundColor: "#eff0f1"
+
 		property color diveListTextColor: lightPrimaryTextColor
 
 		property int columnWidth: Math.round(rootItem.width/(Kirigami.Units.gridUnit*28)) > 0 ? Math.round(rootItem.width / Math.round(rootItem.width/(Kirigami.Units.gridUnit*28))) : rootItem.width
 		Component.onCompleted: {
 			Kirigami.Theme.highlightColor = Qt.binding(function() { return darkPrimaryColor })
 			Kirigami.Theme.highlighedTextColor = Qt.binding(function() { return darkPrimaryTextColor })
+			Kirigami.Theme.backgroundColor = Qt.binding(function() { return backgroundColor })
+			Kirigami.Theme.textColor = Qt.binding(function() { return diveListTextColor })
 		}
 	}
 	property Item stackView: pageStack