feat: enable changing theme from the profile settings

ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml

@@ -12,7 +12,7 @@ Item {
     Layout.fillWidth: true
 
     StyledText {
-        id: element7
+        id: title
         text: qsTr("Advanced settings")
         anchors.left: parent.left
         anchors.leftMargin: 24
@@ -22,9 +22,33 @@ Item {
         font.pixelSize: 20
     }
 
+    RowLayout {
+        // TODO move this to a new panel once we have the appearance panel
+        property bool isDarkTheme: false
+        id: themeSetting
+        anchors.top: title.bottom
+        anchors.topMargin: 20
+        anchors.left: parent.left
+        anchors.leftMargin: 24
+        StyledText {
+            text: qsTr("Theme (Light - Dark)")
+        }
+        Switch {
+            checked: themeSetting.isDarkTheme
+            onCheckedChanged: function(value) {
+                themeSetting.isDarkTheme = !themeSetting.isDarkTheme
+                if (themeSetting.isDarkTheme) {
+                    Style.changeTheme('dark')
+                } else {
+                    Style.changeTheme('light')
+                }
+            }
+        }
+    }
+
     RowLayout {
         id: walletTabSettings
-        anchors.top: element7.bottom
+        anchors.top: themeSetting.bottom
         anchors.topMargin: 20
         anchors.left: parent.left
         anchors.leftMargin: 24

ui/imports/Style.qml

@@ -5,5 +5,15 @@ import "./Themes"
 
 QtObject {
     property Theme current: lightTheme
-    property Theme lightTheme: LightTheme { }
+    property Theme lightTheme: LightTheme {}
+    property Theme darkTheme: DarkTheme {}
+
+    property var changeTheme: function (theme) {
+        switch (theme) {
+            case "light": current = lightTheme; break;
+            case "dark": current = darkTheme; break;
+            default: current = lightTheme; console.log('Unknown theme. Valid themes are "light" and "dark"')
+        }
+
+    }
 }

ui/imports/Themes/DarkTheme.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.13
+import "."
+
+Theme {
+    property color white: "#000000"
+    property color white2: "#FCFCFC"
+    property color black: "#000000"
+    property color grey: "#EEF2F5"
+    property color lightBlue: "#ECEFFC"
+    property color blue: "#4360DF"
+    property color transparent: "#00000000"
+    property color darkGrey: "#939BA1"
+    property color lightBlueText: "#8f9fec"
+    property color darkBlue: "#3c55c9"
+    property color darkBlueBtn: "#5a70dd"
+    property color red: "#FF2D55"
+}

ui/imports/Themes/qmldir

@@ -1,2 +1,4 @@
 Theme 1.0 ./Theme.qml
 LightTheme 1.0 ./LightTheme.qml
+DarkTheme 1.0 ./DarkTheme.qml
+

ui/main.qml

@@ -16,6 +16,7 @@ ApplicationWindow {
     id: applicationWindow
     width: 1232
     height: 770
+    color: Style.current.white
     title: {
         // Set application settings
         Qt.application.name = qsTr("Nim Status Client")
@@ -214,3 +215,9 @@ ApplicationWindow {
         }
     }
 }
+
+/*##^##
+Designer {
+    D{i:0;formeditorZoom:0.5}
+}
+##^##*/

ui/nim-status-client.pro

@@ -169,6 +169,7 @@ DISTFILES += \
     app/img/walletActive.svg \
     app/qmldir \
     imports/Emoji.qml \
+    imports/Themes/DarkTheme.qml \
     imports/Themes/LightTheme.qml \
     imports/Themes/Theme.qml \
     imports/Themes/qmldir \