Add basic dark/light/System switch

ScreenPlay/main.qml

@@ -1,11 +1,13 @@
 import QtQuick 2.12
 import QtQuick.Window 2.2
 import QtQuick.Controls 2.3
+import QtQuick.Controls.Material 2.12
 import QtQuick.Layouts 1.3
 import QtGraphicalEffects 1.0
 import Qt.labs.platform 1.0
 
 import ScreenPlay 1.0
+import Settings 1.0
 
 import "qml/"
 import "qml/Monitors"
@@ -16,7 +18,7 @@ import "qml/Workshop"
 
 ApplicationWindow {
     id: window
-    color: "#eeeeee"
+    color: Material.background
     // Set visible if the -silent parameter was not set (see app.cpp end of constructor).
     visible: false
     width: 1400
@@ -25,7 +27,33 @@ ApplicationWindow {
     minimumHeight: 450
     minimumWidth: 1050
 
+    Material.theme: {
+        switch (Settings.theme) {
+        case Settings.Auto:
+            return Material.System
+        case Settings.Dark:
+            return Material.Dark
+        case Settings.Light:
+            return Material.Light
+        }
+    }
+
+    function setTheme(theme){
+        switch (theme) {
+        case Settings.System:
+            window.Material.theme = Material.System
+            break
+        case Settings.Dark:
+            window.Material.theme = Material.Dark
+            break
+        case Settings.Light:
+            window.Material.theme = Material.Light
+            break
+        }
+    }
+
     Component.onCompleted: {
+
         if (!ScreenPlay.settings.silentStart) {
             window.show()
             ScreenPlay.setTrackerSendEvent("navigation", "Installed")
@@ -72,6 +100,11 @@ ApplicationWindow {
         anchors.fill: parent
     }
 
+    Connections {
+        target: ScreenPlay.settings
+        onThemeChanged:setTheme(theme)
+    }
+
     Connections {
         target: ScreenPlay.util
         onRequestNavigation: {

ScreenPlay/qml/Common/GrowIconLink.qml

@@ -1,11 +1,13 @@
 import QtQuick 2.0
 import QtGraphicalEffects 1.0
+import QtQuick.Controls.Material 2.12
 
 Rectangle {
     id: root
-    color: "gray"
+    color: Material.background
-    width: 32
+    width: 42
-    height: 32
+    height: width
+    radius: width
 
     property alias iconSource: icon.source
     property string url
@@ -13,9 +15,10 @@ Rectangle {
 
     Image {
         id: icon
-        sourceSize: Qt.size(32, 32)
+        sourceSize: Qt.size(28, 28)
         anchors.centerIn: parent
         visible: false
+        smooth: true
         source: "qrc:/assets/icons/icon_info.svg"
     }
 
@@ -40,9 +43,9 @@ Rectangle {
             name: "hover"
             PropertyChanges {
                 target: icon
-                width:40
+                width: 34
-                height:40
+                height: 34
-                sourceSize: Qt.size(40,40)
+                sourceSize: Qt.size(34,34)
             }
         }
     ]

ScreenPlay/qml/Create/CreateContentButton.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
+import QtQuick.Controls.Material 2.12
 import QtGraphicalEffects 1.0
 import ScreenPlay 1.0
 
@@ -39,6 +40,7 @@ Item {
 
     Rectangle {
         id: bg
+        color: Material.background
         height: parent.height - 10
         anchors {
             top: parent.top

ScreenPlay/qml/Create/Footer.qml

@@ -14,8 +14,8 @@ Rectangle {
     id: footer
     height: 80
     z: 100
-    anchors {
+    color: Material.background
-    }
+
     Row {
         anchors.centerIn: parent
         spacing: 20

ScreenPlay/qml/Create/ImportContent.qml

@@ -1,8 +1,8 @@
 import QtQuick 2.12
 import QtGraphicalEffects 1.0
 import QtQuick.Controls 2.3
-import Qt.labs.platform 1.0
 import QtQuick.Controls.Material 2.2
+import Qt.labs.platform 1.0
 
 import ScreenPlay 1.0
 
@@ -47,6 +47,8 @@ Item {
 
         Rectangle {
             id: importVideoBg
+            color: Material.background
+
             radius: 3
             z: 10
             anchors {
@@ -130,6 +132,8 @@ Item {
 
         Rectangle {
             id: convertVideoBg
+            color: Material.background
+
             radius: 3
             z: 10
             anchors {
@@ -232,6 +236,8 @@ Item {
         Rectangle {
             id: importVideoBg3
             radius: 3
+            color: Material.background
+
             z: 10
             anchors {
                 fill: parent

ScreenPlay/qml/Installed/Installed.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
+import QtQuick.Controls.Material 2.12
 import QtQuick.Controls.Styles 1.4
 import QtGraphicalEffects 1.0
 
@@ -214,7 +215,7 @@ Item {
 
         Rectangle {
             id: nav
-            color: "#ffffff"
+            color: Material.background
             height: 50
             anchors {
                 top: parent.top

ScreenPlay/qml/Installed/Sidebar.qml

@@ -134,7 +134,7 @@ Item {
 
         Rectangle {
             id: sidebarBackground
-            color: "white"
+            color: Material.background
             anchors {
                 top: navBackground.bottom
                 right: parent.right

ScreenPlay/qml/Monitors/MonitorSelection.qml

@@ -1,10 +1,12 @@
 import QtQuick 2.12
 import QtGraphicalEffects 1.0
+import QtQuick.Controls 2.12
+import QtQuick.Controls.Material 2.12
 import ScreenPlay 1.0
 
 Rectangle {
     id: rect
-
+    color: Qt.darker(Material.background)
     height: availableHeight
     width: availableWidth
 

ScreenPlay/qml/Navigation/Navigation.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.12
-import QtQuick.Controls 2.3
+import QtQuick.Controls 2.12
+import QtQuick.Controls.Material 2.12
 import QtGraphicalEffects 1.0
 
 import ScreenPlay 1.0
@@ -12,7 +13,7 @@ Rectangle {
     height: 60
     clip: true
     width: 1366
-    color: "#ffffff"
+    color: Material.background
 
     signal changePage(string name)
 
@@ -24,7 +25,7 @@ Rectangle {
         onRequestNavigationActive: {
             setActive(isActive)
         }
-        onRequestNavigation:{
+        onRequestNavigation: {
             onPageChanged(nav)
         }
     }
@@ -38,11 +39,9 @@ Rectangle {
         }
     }
 
-
     function onPageChanged(name) {
 
-
+        ScreenPlay.setTrackerSendEvent("navigation", name)
-        ScreenPlay.setTrackerSendEvent("navigation",name);
 
         if (!navActive)
             return
@@ -113,8 +112,7 @@ Rectangle {
         }
     }
 
-    NavigationWallpaperConfiguration {
+    NavigationWallpaperConfiguration {}
-    }
     states: [
         State {
             name: "enabled"

ScreenPlay/qml/Navigation/NavigationItem.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.12
 import QtGraphicalEffects 1.0
+import QtQuick.Controls.Material 2.12
 import ScreenPlay 1.0
 
 Item {
@@ -63,7 +64,7 @@ Item {
             anchors.left: icon.right
             anchors.leftMargin: 10
             font.pointSize: 14
-            color: "#626262"
+            color: Material.foreground
             anchors.verticalCenter: parent.verticalCenter
             font.family: ScreenPlay.settings.font
             font.weight: Font.Normal
@@ -77,7 +78,7 @@ Item {
             anchors.leftMargin: navigationItem.amount == "" ? 0 : 5
             text: "name"
             font.pointSize: 14
-            color: "#626262"
+            color: Material.foreground
             anchors.verticalCenter: parent.verticalCenter
             font.family: ScreenPlay.settings.font
             font.weight: Font.Normal
@@ -87,14 +88,14 @@ Item {
             id: iconColorOverlay
             anchors.fill: icon
             source: icon
-            color: "#FFAB00"
+            color: Material.accentColor
         }
 
         Rectangle {
             id: navIndicator
             y: 83
             height: 3
-            color: "#FFAB00"
+            color: Material.accent
             anchors.left: parent.left
             anchors.right: parent.right
             anchors.bottom: parent.bottom
@@ -113,7 +114,7 @@ Item {
 
             PropertyChanges {
                 target: iconColorOverlay
-                color: "#FFAB00"
+                color: Material.accent
             }
         },
         State {

ScreenPlay/qml/Settings/Settings.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
+import QtQuick.Controls.Material 2.12
 import QtQuick.Dialogs 1.2
 import QtQuick.Layouts 1.3
 import QtGraphicalEffects 1.0
@@ -51,7 +52,7 @@ Item {
 
             Item {
                 id: settingsGeneralWrapper
-                height: 540 + txtDirChangesInfo.paintedHeight
+                height: 620 + txtDirChangesInfo.paintedHeight
                 width: parent.width
 
                 RectangularGlow {
@@ -74,6 +75,7 @@ Item {
                     anchors.fill: parent
                     radius: 4
                     clip: true
+                    color: Material.backgroundColor
 
                     SettingsHeader {
                         id: headerGeneral
@@ -185,33 +187,62 @@ Item {
 
                             comboBox {
                                 onActivated: {
-                                    ScreenPlay.settings.setLanguage(settingsLanguage.comboBox.currentValue)
+                                    ScreenPlay.settings.setLanguage(
+                                                settingsLanguage.comboBox.currentValue)
                                     ScreenPlay.settings.retranslateUI()
                                 }
                                 model: [{
                                         "value": Settings.En,
                                         "text": qsTr("English")
                                     }, {
-                                        "value":  Settings.De,
+                                        "value": Settings.De,
                                         "text": qsTr("German")
                                     }, {
-                                        "value":  Settings.Ru,
+                                        "value": Settings.Ru,
                                         "text": qsTr("Russian")
                                     }, {
-                                        "value":  Settings.Fr,
+                                        "value": Settings.Fr,
                                         "text": qsTr("French")
                                     }, {
-                                        "value":  Settings.Es,
+                                        "value": Settings.Es,
                                         "text": qsTr("Spanish")
                                     }, {
-                                        "value":  Settings.Ko,
+                                        "value": Settings.Ko,
                                         "text": qsTr("Korean")
                                     }, {
-                                        "value":  Settings.Vi,
+                                        "value": Settings.Vi,
                                         "text": qsTr("Vietnamese")
                                     }]
                             }
                         }
+                        SettingsHorizontalSeperator {}
+
+                        SettingsComboBox {
+                            id: settingsTheme
+                            headline: qsTr("Theme")
+                            description: qsTr("Switch dark/light theme")
+                            Component.onCompleted: {
+                                settingsTheme.comboBox.currentIndex = root.indexOfValue(
+                                            settingsTheme.comboBox.model,
+                                            ScreenPlay.settings.theme)
+                            }
+
+                            comboBox {
+                                onActivated: {
+                                    ScreenPlay.settings.setTheme(settingsTheme.comboBox.currentValue)
+                                }
+                                model: [{
+                                        "value": Settings.System,
+                                        "text": qsTr("System Default")
+                                    }, {
+                                        "value": Settings.Dark,
+                                        "text": qsTr("Dark")
+                                    }, {
+                                        "value": Settings.Light,
+                                        "text": qsTr("Light")
+                                    }]
+                            }
+                        }
                     }
                 }
             }
@@ -239,6 +270,7 @@ Item {
 
                 Rectangle {
                     anchors.fill: parent
+                    color: Material.backgroundColor
                     radius: 4
                     clip: true
 
@@ -331,7 +363,7 @@ Item {
                 }
 
                 Rectangle {
-
+                    color: Material.backgroundColor
                     anchors.fill: parent
                     radius: 4
                     clip: true
@@ -369,7 +401,7 @@ Item {
                                 verticalAlignment: Text.AlignVCenter
                                 horizontalAlignment: Text.AlignLeft
                                 font.pointSize: 16
-                                 font.family: ScreenPlay.settings.font
+                                font.family: ScreenPlay.settings.font
                                 anchors {
                                     top: parent.top
                                     topMargin: 6

ScreenPlay/qml/Settings/SettingsHorizontalSeperator.qml

@@ -1,9 +1,10 @@
 import QtQuick 2.12
+import QtQuick.Controls.Material 2.12
 
 Item {
     property real customWidth: parent.width
     property real customHeight: 1
-    property color customColor: "#dddddd"
+    property color customColor:  Material.background
     property real customMargin: 10
 
     height: customMargin

ScreenPlay/qtquickcontrols2.conf

@@ -4,8 +4,4 @@ Style=Material
 [Material]
 Theme=Light
 Accent=Orange
-Primary=White
-Foreground=Grey
-Font\Family=Roboto
-Font\PixelSize=12
 Variant=Dense

ScreenPlay/src/settings.cpp

@@ -40,6 +40,8 @@ Settings::Settings(const shared_ptr<GlobalVariables>& globalVariables,
 {
     qRegisterMetaType<Settings::FillMode>("Settings::FillMode");
     qRegisterMetaType<Settings::Language>("Settings::Language");
+    qRegisterMetaType<Settings::Theme>("Settings::Theme");
+
     qmlRegisterUncreatableType<Settings>("Settings", 1, 0, "Settings", "Error only for enums");
 
     {
@@ -60,12 +62,18 @@ Settings::Settings(const shared_ptr<GlobalVariables>& globalVariables,
         }
     }
 
-    setCheckWallpaperVisible(m_qSettings.value("CheckWallpaperVisible", true).toBool());
+
+    setCheckWallpaperVisible(m_qSettings.value("CheckWallpaperVisible", false).toBool());
     setHighPriorityStart(m_qSettings.value("ScreenPlayExecutable", false).toBool());
     if (m_qSettings.contains("VideoFillMode")) {
         auto value = m_qSettings.value("VideoFillMode").toString();
         setVideoFillMode(QStringToEnum<FillMode>(value, FillMode::Fill));
     }
+    if (m_qSettings.contains("Theme")) {
+        auto value = m_qSettings.value("Theme").toString();
+        setTheme(QStringToEnum<Theme>(value, Theme::System));
+    }
+
     setAnonymousTelemetry(m_qSettings.value("AnonymousTelemetry", true).toBool());
 
     // Wallpaper and Widgets config

ScreenPlay/src/settings.h

@@ -69,6 +69,7 @@ class Settings : public QObject {
 
     Q_PROPERTY(FillMode videoFillMode READ videoFillMode WRITE setVideoFillMode NOTIFY videoFillModeChanged)
     Q_PROPERTY(Language language READ language WRITE setLanguage NOTIFY languageChanged)
+    Q_PROPERTY(Theme theme READ theme WRITE setTheme NOTIFY themeChanged)
 
     Q_PROPERTY(QString decoder READ decoder WRITE setDecoder NOTIFY decoderChanged)
     Q_PROPERTY(QString gitBuildHash READ gitBuildHash WRITE setGitBuildHash NOTIFY gitBuildHashChanged)
@@ -99,6 +100,13 @@ public:
     };
     Q_ENUM(Language)
 
+    enum class Theme {
+        System,
+        Dark,
+        Light
+    };
+    Q_ENUM(Theme)
+
     bool offlineMode() const
     {
         return m_offlineMode;
@@ -162,6 +170,11 @@ public:
         return m_font;
     }
 
+    Theme theme() const
+    {
+        return m_theme;
+    }
+
 signals:
     void requestRetranslation();
 
@@ -181,6 +194,8 @@ signals:
 
     void fontChanged(QString font);
 
+    void themeChanged(Theme theme);
+
 public slots:
     void writeJsonFileFromResource(const QString& filename);
     void setupWidgetAndWindowPaths();
@@ -324,6 +339,17 @@ public slots:
         emit fontChanged(m_font);
     }
 
+    void setTheme(Theme theme)
+    {
+        if (m_theme == theme)
+            return;
+
+         setqSetting("Theme", QVariant::fromValue(theme).toString());
+
+        m_theme = theme;
+        emit themeChanged(m_theme);
+    }
+
 private:
     void restoreDefault(const QString& appConfigLocation, const QString& settingsFileType);
 
@@ -342,8 +368,9 @@ private:
 
     QString m_gitBuildHash;
     QString m_decoder;
-    FillMode m_videoFillMode;
+    FillMode m_videoFillMode { FillMode::Fill };
-    Language m_language = Language::En;
+    Language m_language { Language::En };
-    QString m_font {"Roboto"};
+    Theme m_theme { Theme::System };
+    QString m_font { "Roboto" };
 };
 }