UI: Remove white backgrounds, so that you can use a Dark mode or other background colors. #55

src/qml/BarMapView.qml

@@ -31,6 +31,7 @@ ColumnLayout{
             anchors.left: parent.left
             border.width: 2
             border.color: "black"
+            color: "transparent"
 
             Flickable{
                 anchors.fill: parent

src/qml/ControlPane/ControlItem.qml

@@ -14,9 +14,9 @@ ControlItemTemplate{
     property bool pressed: false
     onPressedChanged:{
         if(pressed){
-            rectangle.color="#C7C7FF";
+            rectangle.color=Qt.rgba(0,0,1,.2);
         }else{
-            rectangle.color="white";
+            rectangle.color="transparent";
         }
     }
 
@@ -25,6 +25,7 @@ ControlItemTemplate{
         anchors.fill: parent
         border.width: 1
         border.color: "blue"
+        color: "transparent"
         radius: 3
         layer.enabled: true;
         layer.effect: FastBlur{

src/qml/HelpSystem/Help.qml

@@ -152,12 +152,11 @@ Popup {
 
     background: Pane{
         padding: 0
-        Component.onCompleted: background.color = "white"
         Material.elevation: 24
 
         Rectangle{
             id: arrow
-            color: "white"
+            color: Material.backgroundColor
             rotation: 45
             width: 20
             height: 20
@@ -274,7 +273,6 @@ Popup {
 
     contentItem: Page{
         id: page
-        Component.onCompleted: background.color = "white"
 
         Keys.onRightPressed: if(hasNextEntry)++currentIndex;
         Keys.onLeftPressed: if(hasPreviousEntry)--currentIndex;
@@ -290,7 +288,7 @@ Popup {
                 anchors.right: parent.right
                 anchors.top: parent.top
                 anchors.topMargin: -3
-                color: mouseArea.containsMouse ? "black" : "gray"
+                color: mouseArea.containsMouse ? Material.iconColor : Material.iconDisabledColor
                 MouseArea{
                     id: mouseArea
                     anchors.fill: parent