Palette¶

Import: import QGroundControl.Palette

The QGCPalette type provides a theme-aware color palette. Each color automatically adapts to the active theme (indoor vs outdoor) — use these named colors instead of hardcoded hex values so your plugin matches AMC and stays readable in every theme.

Usage¶

qgcPal is available globally — reference it directly, no instantiation needed:

import QGroundControl.Palette

Rectangle {
    color: qgcPal.window
}

The import QGroundControl.Palette line is still required to bring qgcPal into scope.

Most colors are theme-aware: they resolve to a different value for the indoor vs outdoor theme (and dim when the owning control is disabled). A handful are fixed — noted as non-themed below. You don't need to track which is which; just use the named color and it does the right thing.

Solid variants

Several background colors come in two forms: the base color is semi-transparent, while the …Solid variant is fully opaque. Use the solid variant when you need a guaranteed-opaque background (e.g. behind text).

Window colors¶

Property	Description
`window`	Main window background (semi-transparent)
`windowSolid`	Opaque window background
`windowShade`	Shaded window area — panels, cards (semi-transparent)
`windowShadeSolid`	Opaque shaded window area
`windowShadeDark`	Darker shade variant (semi-transparent)
`windowShadeDarkSolid`	Opaque darker shade variant
`toolbarBackground`	Toolbar background
`popupBackground`	Popup / dialog background

Text colors¶

Property	Description
`text`	Primary text
`warningText`	Warning text
`textRed`	Red text
`textAmber`	Amber/orange text
`textGreen`	Green text

Button colors¶

Property	Description
`button`	Button background
`buttonText`	Button text
`buttonHighlight`	Highlighted/active button background
`buttonHighlightText`	Highlighted button text
`buttonBorder`	Button border
`primaryButton`	Primary action button background
`primaryButtonText`	Primary action button text
`checkedColor`	Checked/selected state (switches, checkboxes)

Text field colors¶

Property	Description
`textField`	Text field background
`textFieldBorder`	Text field border
`textFieldText`	Text field text

Status colors¶

Property	Description
`colorGreen`	Green (OK, success)
`colorOrange`	Orange (warning)
`colorRed`	Red (error, danger)
`colorGrey`	Grey (neutral, disabled)
`colorBlue`	Blue (info, active)
`colorLightBlue`	Light blue
`statusFailedText`	Failed status text
`statusPassedText`	Passed status text
`statusPendingText`	Pending status text

Alert colors¶

Property	Description
`alertBackground`	Alert panel background
`alertBorder`	Alert panel border
`alertText`	Alert text

Map colors¶

The first four adapt to theme; the rest are fixed map overlay colors (non-themed).

Property	Description
`mapButton`	Map button
`mapButtonHighlight`	Map button highlight
`mapIndicator`	Map indicator
`mapIndicatorChild`	Map indicator child element
`mapWidgetBorderLight`	Map widget border (light)
`mapWidgetBorderDark`	Map widget border (dark)
`mapMissionTrajectory`	Mission trajectory line
`mapFlighTaskEditing`	Flight task being edited
`mapEditingLabel`	Map editing label
`mapCollisionFree`	Collision-free indicator (light green)
`mapCollisionWarning`	Collision warning indicator
`mapTerrainCollision`	Terrain collision indicator (red)
`mapVehicleTelemetry`	Vehicle telemetry overlay (light blue)
`mapVehicleTrajectory`	Vehicle trajectory line (red)
`surveyPolygonInterior`	Survey polygon fill

Other colors¶

Property	Description
`border`	Generic border/divider
`infoBorder`	Info border
`missionItemEditor`	Mission item editor background
`markerGlow`	Marker glow effect
`fadeRed`	Faded/pastel red

Non-themed colors¶

These keep the same value in every theme (branding colors still dim when disabled; the rest are fully fixed).

Property	Description
`brandingPurple`	Auterion branding purple
`brandingBlue`	Auterion branding blue

Utility functions¶

Function	Parameters	Description
`changeAlpha(color, alpha)`	`color, real`	Return color with modified alpha
`changeBrightness(color, factor)`	`color, real`	Adjust brightness. Positive = lighter, negative = darker.
`mapLineBorderModifier(color)`	`color`	Darken and reduce alpha for map line borders

Example¶

Rectangle {
    color: qgcPal.changeAlpha(qgcPal.colorGreen, 0.5)
    border.color: qgcPal.changeBrightness(qgcPal.windowShade, -0.2)
}

Common patterns¶

Status-colored text¶

QGCLabel {
    text: vehicle.battery1.percentRemaining.valueString
    color: {
        var pct = vehicle.battery1.percentRemaining.value
        if (pct < 20) return qgcPal.colorRed
        if (pct < 50) return qgcPal.colorOrange
        return qgcPal.text
    }
}

Themed card¶

Rectangle {
    color: qgcPal.windowShade
    border.color: qgcPal.colorGreen
    border.width: 1
    radius: ScreenTools.defaultFontPixelWidth / 2
}

Loading indicator border¶

Rectangle {
    border.color: isLoading ? qgcPal.colorBlue :
                  hasError  ? qgcPal.colorOrange :
                              qgcPal.colorGreen
}