UI/UX: In the settings tab you can now customize the theme. Use this theme in...

UI/UX: In the settings tab you can now customize the theme. Use this theme in the main window and the color dialog. The TextUnderline of TextInputFields is still "lightgreen". The Theme settings are stored in the per user settings of the OS.
Closes #55

src/qml.qrc

@@ -81,5 +81,6 @@
         <file>qml/components/ColorDialog.qml</file>
         <file>qml/components/ColorSlider.qml</file>
         <file>qml/AudioEventsView.qml</file>
+        <file>qml/ModifyThemePane.qml</file>
     </qresource>
 </RCC>

src/qml/SettingsView.qml

-import QtQuick 2.9
-import QtQuick.Controls 2.2
-import QtQuick.Layouts 1.3
-import QtQuick.Dialogs 1.2
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.Material 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Dialogs 1.3
+import QtQuick.Window 2.12
 import "components"
 
 Pane{
@@ -112,6 +114,14 @@ Pane{
             currentIndex: AudioManager.currentCaptureDevice
             onDownChanged: if(down)AudioManager.updateCaptureDeviceList()
         }
+        Label{
+            Layout.fillWidth: true
+            text: "Theme:"
+        }
+        Button{
+            text: "Modify Theme and appearance"
+            onClicked: modifyThemeWindow.show()
+        }
     }
     FileDialog{
         property var callback;
@@ -130,4 +140,17 @@ Pane{
             }
         }
     }
+    Window{
+        id: modifyThemeWindow
+        flags: Qt.WindowStaysOnTopHint | Qt.Dialog | Qt.WindowCloseButtonHint | Qt.WindowTitleHint
+        title: "Modify Theme"
+        color: pane.Material.background
+        width: 350
+        height: 350
+        Material.theme: Settings.theme
+        ModifyThemePane{
+            id: pane
+            anchors.fill: parent
+        }
+    }
 }

src/qml/components/ColorDialog.qml

 import QtQuick 2.12
-import QtQuick.Controls 2.5
+import QtQuick.Controls 2.12
+import QtQuick.Controls.Material 2.12
 import QtQuick.Layouts 1.12
 import QtQuick.Window 2.12
+import custom.licht 1.0
 
 Window {
     id: root
@@ -20,6 +22,11 @@ Window {
     signal colorSelected(color selectedColor);
     onClosing: colorSelected(currentColor);
 
+    Material.background: Settings.backgroundColor
+    Material.foreground: Settings.foregroundColor
+    Material.accent: Settings.accentColor
+    Material.theme: Settings.theme
+    color: Settings.backgroundColor
 
     ColumnLayout{
         anchors.fill: parent

src/qml/main.qml

@@ -15,7 +15,10 @@ ApplicationWindow {
     height: 480
     title: qsTr("Lichtsteuerung")
 
-
+    Material.background: Settings.backgroundColor
+    Material.foreground: Settings.foregroundColor
+    Material.accent: Settings.accentColor
+    Material.theme: Settings.theme
 
     Item{
         anchors.fill: parent