Add theme switch to side navigation menu

1 files changed, 34 insertions, 8 deletions

diff --git a/src/main.qml b/src/main.qml
index d91c962..f8e0df4 100644
--- a/src/main.qml
+++ b/src/main.qml
@@ -231,7 +231,8 @@ ApplicationWindow {
     }
 
     // Set dark/light theme based on the slider setting
-    Material.theme: theme.position < 1 ? Material.Light : Material.Dark
+    Material.theme: inPortrait ? (theme_portrait.position < 1 ? Material.Light : Material.Dark)
+                               : (theme_landscape.position < 1 ? Material.Light : Material.Dark)
 
     ToolBar {
         id: top_menu_bar_frame
@@ -250,10 +251,11 @@ ApplicationWindow {
         anchors.top: parent.top
 
         Switch {
-            id: theme
+            id: theme_landscape
             width: 150
             implicitWidth: 100
             visible: !inPortrait
+            parent: inPortrait ? sidebar_listview : top_menu_bar_frame
 
             height: parent.height
             anchors.margins: 10
@@ -262,25 +264,49 @@ ApplicationWindow {
             anchors.verticalCenterOffset: 0
             anchors.leftMargin: 0
             anchors.verticalCenter: parent.verticalCenter
+
+            /*!
+              Here is the default setting for dark/light mode
+              */
             checked: true
+
+            onCheckedChanged: {
+                theme_portrait.checked = checked
+            }
+        }
+
+        Switch {
+            id: theme_portrait
+            visible: inPortrait
+            parent: sidebar_listview
+
+            height: 50
+            width: parent.width
+
+            anchors.bottom: parent.bottom
+            text: qsTr("Dark theme")
+
+            checked: theme_landscape.checked
+            onCheckedChanged: {
+                theme_landscape.checked = checked
+            }
         }
 
         Label {
             id: header_text
             height: parent.height
-            color: "#ffffff"
+            color: "white"
             text: qsTr("Allow Remote Control")
-            anchors.left: inPortrait ? burger_button.right : theme.right
-            anchors.leftMargin: 5
-            horizontalAlignment: Text.AlignRight
-            padding: 5
-            font.family: "Verdana"
             font.pointSize: 20
             fontSizeMode: Text.Fit
+            horizontalAlignment: Text.AlignRight
             verticalAlignment: Text.AlignVCenter
+            anchors.left:       inPortrait ? burger_button.right : parent.left
+            anchors.leftMargin: inPortrait ? 5 : theme_landscape.width
             anchors.right: parent.right
             anchors.rightMargin: 5
             anchors.verticalCenter: parent.verticalCenter
+            padding: 5
         }
 
         Button {