diff --git a/custom-example/custom.qrc b/custom-example/custom.qrc
index a53c4ada3c28c21bd69200a5666641483b57973f..08de536f4c3729b2b70885b89c3e3838650edc1f 100644
--- a/custom-example/custom.qrc
+++ b/custom-example/custom.qrc
@@ -25,8 +25,9 @@
         <file alias="compass_pointer.svg">res/Images/compass_pointer.svg</file>
         <file alias="distance.svg">res/Images/distance.svg</file>
         <file alias="gimbal_icon.svg">res/Images/gimbal_icon.svg</file>
-        <file alias="gimbal_pitch.svg">res/Images/gimbal_pitch.svg</file>
         <file alias="gimbal_position.svg">res/Images/gimbal_position.svg</file>
+        <file alias="gimbal_pitch_indoors.svg">res/Images/gimbal_pitch_indoors.svg</file>
+        <file alias="gimbal_pitch_outdoors.svg">res/Images/gimbal_pitch_outdoors.svg</file>
         <file alias="horizontal_speed.svg">res/Images/horizontal_speed.svg</file>
         <file alias="microSD.svg">res/Images/microSD.svg</file>
         <file alias="odometer.svg">res/Images/odometer.svg</file>
diff --git a/custom-example/res/CustomCameraControl.qml b/custom-example/res/CustomCameraControl.qml
index 2d2b53886f8d5dac354c9ff0f2cf0bc4eb6fc7d3..530c6dbd150eefa4f185d4bd817c33e31c12181c 100644
--- a/custom-example/res/CustomCameraControl.qml
+++ b/custom-example/res/CustomCameraControl.qml
@@ -409,8 +409,9 @@ Item {
                     id:                 gimbalCol
                     spacing:            ScreenTools.defaultFontPixelHeight * 0.75
                     anchors.centerIn:   parent
-                    Image {
+                    QGCColoredImage {
                         source:         "/custom/img/gimbal_icon.svg"
+                        color:          qgcPal.text
                         width:          ScreenTools.defaultFontPixelWidth * 2
                         height:         width
                         smooth:         true
@@ -419,11 +420,12 @@ Item {
                         fillMode:       Image.PreserveAspectFit
                         sourceSize.width: width
                         anchors.horizontalCenter: parent.horizontalCenter
+
                     }
                     Image {
                         id:                 pitchScale
                         height:             cameraRect.height * 0.65
-                        source:             "/custom/img/gimbal_pitch.svg"
+                        source:             qgcPal.globalTheme === QGCPalette.Light ? "/custom/img/gimbal_pitch_indoors.svg" : "/custom/img/gimbal_pitch_outdoors.svg"
                         fillMode:           Image.PreserveAspectFit
                         sourceSize.height:  height
                         smooth:             true
@@ -451,7 +453,7 @@ Item {
                     QGCLabel {
                         id:             gimbalLabel
                         text:           _gimbalPitch ? _gimbalPitch.toFixed(0) : 0
-                        color:          "#FFF"
+                        color:          qgcPal.text
                         font.pointSize:  ScreenTools.smallFontPointSize
                         anchors.horizontalCenter: parent.horizontalCenter
                     }
diff --git a/custom-example/res/Images/gimbal_pitch_indoors.svg b/custom-example/res/Images/gimbal_pitch_indoors.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f153e91bbdac565f382a55eaac480ffbecc5ef78
--- /dev/null
+++ b/custom-example/res/Images/gimbal_pitch_indoors.svg
@@ -0,0 +1,11 @@
+<svg width="72" height="756" viewBox="0 0 72 756" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36 0V108" stroke="#C92A30" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M18 108H54" stroke="#212529" stroke-width="6" stroke-miterlimit="10"/>
+<path d="M18 324H54" stroke="#212529" stroke-width="6" stroke-miterlimit="10"/>
+<path d="M18 540H54" stroke="#212529" stroke-width="6" stroke-miterlimit="10"/>
+<path d="M18 753H54" stroke="#212529" stroke-width="6" stroke-miterlimit="10"/>
+<path d="M18 3H54" stroke="#9F0B10" stroke-width="6" stroke-miterlimit="10"/>
+<path d="M18 216H54" stroke="#212529" stroke-width="6" stroke-miterlimit="10"/>
+<path d="M18 432H54" stroke="#212529" stroke-width="6" stroke-miterlimit="10"/>
+<path d="M18 648H54" stroke="#212529" stroke-width="6" stroke-miterlimit="10"/>
+</svg>
diff --git a/custom-example/res/Images/gimbal_pitch_outdoors.svg b/custom-example/res/Images/gimbal_pitch_outdoors.svg
new file mode 100644
index 0000000000000000000000000000000000000000..90312c77c854b2e354f511494ae5f096a0974358
--- /dev/null
+++ b/custom-example/res/Images/gimbal_pitch_outdoors.svg
@@ -0,0 +1,11 @@
+<svg width="72" height="756" viewBox="0 0 72 756" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36 0V108" stroke="#E03131" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M18 108H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
+<path d="M18 324H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
+<path d="M18 540H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
+<path d="M18 753H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
+<path d="M18 3H54" stroke="#E03131" stroke-width="6" stroke-miterlimit="10"/>
+<path d="M18 216H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
+<path d="M18 432H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
+<path d="M18 648H54" stroke="white" stroke-width="6" stroke-miterlimit="10"/>
+</svg>