Merge pull request 'prototype of themeing' (#273) from dan/ui:01-theme into master

qml/main.qml

@@ -10,6 +10,7 @@ import "fonts/MutantStandard.js" as Mutant
 import "overlays"
 import "panes"
 import "widgets"
+import "theme"
 import "utils.js" as Utils
 
 
@@ -74,53 +75,6 @@ ApplicationWindow {
         return px * 72 / (Screen.pixelDensity * 25.4)
     }
 
-
-	/* Rectangle { // THE TOOLBAR
-		id: toolbar
-		anchors.top: parent.top
-		anchors.left: parent.left
-		width: ratio >= 0.92 ? parent.width : 70
-		height: ratio >= 0.92 ? 70 : parent.height
-		color: "#4B3557"
-
-		GridLayout {
-			width: parent.width
-			height: parent.height
-			columns: ratio >= 0.92 ? children.length : 1
-
-
-			ContactPicture {
-				Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-				source: "qrc:/qml/images/profiles/001-centaur.png"
-				status: -2
-			}
-
-			ContactPicture {
-				Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-				source: "qrc:/qml/images/profiles/002-kraken.png"
-				status: -2
-			}
-
-			ContactPicture {
-				Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-				source: "qrc:/qml/images/profiles/003-dinosaur.png"
-				status: -2
-			}
-
-			ContactPicture {
-				Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-				source: "qrc:/qml/images/profiles/004-tree-1.png"
-				status: -2
-			}
-
-			ContactPicture {
-				Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-				source: "qrc:/qml/images/profiles/005-hand.png"
-				status: -2
-			}
-		}
-	}*/
-
     StackLayout {
         id: parentStack
         currentIndex: 1
@@ -151,7 +105,7 @@ ApplicationWindow {
         Rectangle { // Profile login/management pane
                     anchors.fill: parent
                     visible: false
-                    color: "#D2C0DD"
+                    color: Theme.backgroundMainColor
 
                     ProfileManagerPane {
                         id: profilesPane

qml/panes/ProfileManagerPane.qml

@@ -11,6 +11,7 @@ import QtQuick.Controls.Styles 1.4
 import "../widgets" as Widgets
 import "../widgets/controls"
 import "../styles"
+import "../theme"
 
 
 ColumnLayout {
@@ -68,7 +69,7 @@ ColumnLayout {
 
 
     Rectangle { // THE LEFT PANE WITH TOOLS AND CONTACTS
-       color: "#D2C0DD"
+       color: Theme.backgroundMainColor
        width: thecol.width
 
        Layout.fillHeight: true

qml/theme/CwtchDark.qml

@@ -0,0 +1,16 @@
+
+ThemeType {
+  readonly property color darkGrayPurple: "#281831"
+  readonly property color deepPurple: "#422850"
+  readonly property color mauvePurple: "#8E64A5"
+  readonly property color purple: "#DFB9DE"
+  readonly property color whitePurple: "#FFFDFF"
+  readonly property color softPurple: "#FDF3FC"
+  readonly property color hotPink: "#775F84"
+
+  backgroundMainColor: darkGrayPurple
+  backgroundPaneColor: mauvePurple
+
+  mainTextColor: whitePurple
+  defaultButtonColor: hotPink
+}

qml/theme/CwtchLight.qml

@@ -0,0 +1,16 @@
+
+ThemeType {
+  readonly property color whitePurple: "#FFFDFF"
+  readonly property color softPurple: "#FDF3FC"
+  readonly property color purple: "#FDF3FC"
+  readonly property color brightPurple: "#760388"
+  readonly property color darkPurple: "#350052"
+  readonly property color greyPurple: "#775F84"
+  readonly property color hotPink: "#775F84"
+
+  backgroundMainColor: whitePurple
+  backgroundPaneColor: purple
+
+  mainTextColor: darkPurpke
+  defaultButtonColor: hotPink
+}

qml/theme/Theme.qml

@@ -0,0 +1,13 @@
+pragma Singleton
+
+import QtQuick 2.0
+
+Item {
+    readonly property color backgroundMainColor: theme.backgroundMainColor
+    readonly property color backgroundPaneColor: theme.backgroundPaneColor
+
+    readonly property color mainTextColor: theme.mainTextColor
+    readonly property color defaultButtonColor: theme.defaultButtonColor
+
+    property ThemeType theme: CwtchLight { }
+}

qml/theme/ThemeType.qml

@@ -0,0 +1,12 @@
+import QtQuick 2.0
+
+QtObject {
+  property color backgroundMainColor: "red"
+  property color backgroundPaneColor: "red"
+
+  property color mainTextColor: "red"
+  property color defaultButtonColor: "red"
+  // ... more to come
+
+
+}

qml/theme/qmldir

@@ -0,0 +1 @@
+singleton Theme 1.0 Theme.qml