diff --git a/src/FlightMap/Widgets/QGCAttitudeWidget.qml b/src/FlightMap/Widgets/QGCAttitudeWidget.qml
index ed2803af63fec4b6a0904ec81cce55d8ad7a99ff..6c0b3776e0b0b2b8f22f4e4c588ebd82af6341d5 100644
--- a/src/FlightMap/Widgets/QGCAttitudeWidget.qml
+++ b/src/FlightMap/Widgets/QGCAttitudeWidget.qml
@@ -20,6 +20,7 @@ import QtGraphicalEffects   1.0
 import QGroundControl               1.0
 import QGroundControl.Controls      1.0
 import QGroundControl.ScreenTools   1.0
+import QGroundControl.Palette       1.0
 
 Item {
     id: root
@@ -35,6 +36,8 @@ Item {
     width:  size
     height: size
 
+    QGCPalette { id: qgcPal; colorGroupEnabled: enabled }
+
     Item {
         id:             instrument
         anchors.fill:   parent
@@ -115,8 +118,8 @@ Item {
         anchors.fill:   parent
         radius:         width / 2
         color:          Qt.rgba(0,0,0,0)
-        border.color:   "black"
-        border.width:   2
+        border.color:   qgcPal.text
+        border.width:   1
     }
 
     QGCLabel {
diff --git a/src/FlightMap/Widgets/QGCCompassWidget.qml b/src/FlightMap/Widgets/QGCCompassWidget.qml
index e1bc3807d722ddc3f794148c17950ee7aa59e3be..3d2307f661a535668ccf9ddde571981863016633 100644
--- a/src/FlightMap/Widgets/QGCCompassWidget.qml
+++ b/src/FlightMap/Widgets/QGCCompassWidget.qml
@@ -20,9 +20,12 @@ import QtGraphicalEffects   1.0
 import QGroundControl.Controls      1.0
 import QGroundControl.ScreenTools   1.0
 import QGroundControl.Vehicle       1.0
+import QGroundControl.Palette       1.0
 
 Item {
-    id:                     root
+    id:     root
+    width:  size
+    height: size
 
     property real size:     _defaultSize
     property var  vehicle:  null
@@ -32,14 +35,15 @@ Item {
     property int  _fontSize:    ScreenTools.defaultFontPointSize * _sizeRatio
     property real _heading:     vehicle ? vehicle.heading.rawValue : 0
 
-    width:                  size
-    height:                 size
+    QGCPalette { id: qgcPal; colorGroupEnabled: enabled }
 
     Rectangle {
         id:             borderRect
         anchors.fill:   parent
         radius:         width / 2
-        color:          "black"
+        color:          qgcPal.window
+        border.color:   qgcPal.text
+        border.width:   1
     }
 
     Item {
@@ -49,9 +53,9 @@ Item {
 
         Image {
             id:                 pointer
+            width:              size * 0.65
             source:             vehicle ? vehicle.vehicleImageCompass : ""
             mipmap:             true
-            width:              size * 0.65
             sourceSize.width:   width
             fillMode:           Image.PreserveAspectFit
             anchors.centerIn:   parent
@@ -62,28 +66,30 @@ Item {
             }
         }
 
-        Image {
+        QGCColoredImage {
             id:                 compassDial
             source:             "/qmlimages/compassInstrumentDial.svg"
             mipmap:             true
             fillMode:           Image.PreserveAspectFit
             anchors.fill:       parent
             sourceSize.height:  parent.height
+            color:              qgcPal.text
         }
 
         Rectangle {
             anchors.centerIn:   parent
             width:              size * 0.35
             height:             size * 0.2
-            border.color:       Qt.rgba(1,1,1,0.15)
-            color:              Qt.rgba(0,0,0,0.65)
+            border.color:       qgcPal.text
+            color:              qgcPal.window
+            opacity:            0.65
 
             QGCLabel {
-                text:           _headingString3
-                font.family:    vehicle ? ScreenTools.demiboldFontFamily : ScreenTools.normalFontFamily
-                font.pointSize: _fontSize < 8 ? 8 : _fontSize;
-                color:          "white"
-                anchors.centerIn: parent
+                text:               _headingString3
+                font.family:        vehicle ? ScreenTools.demiboldFontFamily : ScreenTools.normalFontFamily
+                font.pointSize:     _fontSize < 8 ? 8 : _fontSize;
+                color:              qgcPal.text
+                anchors.centerIn:   parent
 
                 property string _headingString: vehicle ? _heading.toFixed(0) : "OFF"
                 property string _headingString2: _headingString.length === 1 ? "0" + _headingString : _headingString