Skip to content

Better light palette colors, fix Palette Test, adjust some controls palette usage for better visuals #13701

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DonLakeFlyer merged 3 commits into from
Dec 5, 2025
Merged

Better light palette colors, fix Palette Test, adjust some controls palette usage for better visuals #13701

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
88838fe
QGCSwitch replaced by QGCCheckBoxSlider
DonLakeFlyer Dec 5, 2025
26e4c3e
Fix palette editing, add missing QGCCheckBoxSlider control
DonLakeFlyer Dec 5, 2025
0d3dc2f
Better light model palette, adjust controls for better palette usage
DonLakeFlyer Dec 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/FlightMap/Widgets/PhotoVideoControl.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -556,7 +556,7 @@ Rectangle {
initialized = true
}
}
QGCSwitch {
QGCCheckBoxSlider {
checked: parent._fact ? parent._fact.value : false
visible: parent._isBool
onClicked: parent._fact.value = checked ? 1 : 0
Expand Down Expand Up @@ -585,7 +585,7 @@ Rectangle {
onValueChanged: _camera.photoLapse = value
}

QGCSwitch {
QGCCheckBoxSlider {
checked: _videoSettings.gridLines.rawValue
visible: _camera.hasVideoStream
onClicked: _videoSettings.gridLines.rawValue = checked ? 1 : 0
Expand Down
1 change: 0 additions & 1 deletion src/QmlControls/CMakeLists.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,6 @@ qt_add_qml_module(QGroundControlControlsModule
QGCSimpleMessageDialog.qml
QGCSlider.qml
QGCSwipeView.qml
QGCSwitch.qml
QGCTabBar.qml
QGCTabButton.qml
QGCTextField.qml
Expand Down
13 changes: 7 additions & 6 deletions src/QmlControls/QGCCheckBox.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,15 @@ CheckBox {
spacing: _noText ? 0 : ScreenTools.defaultFontPixelWidth
focusPolicy: Qt.ClickFocus

property color textColor: _qgcPal.text
property color textColor: qgcPal.text
property bool textBold: false
property real textFontPointSize: ScreenTools.defaultFontPointSize
property ButtonGroup buttonGroup: null

property var _qgcPal: QGCPalette { colorGroupEnabled: enabled }
property bool _noText: text === ""

property ButtonGroup buttonGroup: null
QGCPalette { id: qgcPal; colorGroupEnabled: enabled }

onButtonGroupChanged: {
if (buttonGroup) {
buttonGroup.addButton(control)
Expand All @@ -41,15 +42,15 @@ CheckBox {
implicitHeight: implicitWidth
x: control.leftPadding
y: parent.height / 2 - height / 2
color: control.enabled ? "white" : _qgcPal.text
border.color: _qgcPal.text
color: control.enabled ? "white" : "transparent"
border.color: qgcPal.buttonBorder
border.width: 1
radius: ScreenTools.buttonBorderRadius
opacity: control.checkedState === Qt.PartiallyChecked ? 0.5 : 1

QGCColoredImage {
source: "/qmlimages/checkbox-check.svg"
color: "black"
color: qgcPal.buttonHighlight
mipmap: true
fillMode: Image.PreserveAspectFit
width: parent.implicitWidth * 0.75
Expand Down
18 changes: 9 additions & 9 deletions src/QmlControls/QGCCheckBoxSlider.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ import QtQuick.Layouts
import QGroundControl
import QGroundControl.Controls


AbstractButton {
id: control
checkable: true
padding: 0
id: control
checkable: true
padding: 0

property bool _showBorder: qgcPal.globalTheme === QGCPalette.Light
property bool _showBorder: qgcPal.globalTheme === QGCPalette.Light
property int _sliderInset: 2

QGCPalette { id: qgcPal; colorGroupEnabled: control.enabled }

Expand All @@ -42,17 +42,17 @@ AbstractButton {
height: ScreenTools.defaultFontPixelHeight
width: height * 2
radius: height / 2
color: control.checked ? qgcPal.primaryButton : qgcPal.button
color: qgcPal.button
border.width: _showBorder ? 1 : 0
border.color: qgcPal.buttonBorder

Rectangle {
anchors.verticalCenter: parent.verticalCenter
x: checked ? indicator.width - width - 1: 1
height: parent.height - 2
x: checked ? indicator.width - width - _sliderInset : _sliderInset
height: parent.height - (_sliderInset * 2)
width: height
radius: height / 2
color: qgcPal.buttonText
color: control.checked ? qgcPal.buttonHighlight : qgcPal.buttonText
}
}
}
Expand Down
16 changes: 8 additions & 8 deletions src/QmlControls/QGCPalette.cc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,19 +53,19 @@ void QGCPalette::_buildMap()
DECLARE_QGC_COLOR(windowShadeLight, "#909090", "#828282", "#707070", "#626262")
DECLARE_QGC_COLOR(windowShade, "#d9d9d9", "#d9d9d9", "#333333", "#333333")
DECLARE_QGC_COLOR(windowShadeDark, "#bdbdbd", "#bdbdbd", "#282828", "#282828")
DECLARE_QGC_COLOR(text, "#9d9d9d", "#000000", "#707070", "#ffffff")
DECLARE_QGC_COLOR(text, "#9d9d9d", "#333333", "#707070", "#ffffff")
DECLARE_QGC_COLOR(windowTransparentText,"#9d9d9d", "#000000", "#707070", "#ffffff")
DECLARE_QGC_COLOR(warningText, "#cc0808", "#cc0808", "#f85761", "#f85761")
DECLARE_QGC_COLOR(button, "#ffffff", "#ffffff", "#707070", "#626270")
DECLARE_QGC_COLOR(buttonBorder, "#ffffff", "#d9d9d9", "#707070", "#adadb8")
DECLARE_QGC_COLOR(buttonText, "#9d9d9d", "#000000", "#A6A6A6", "#ffffff")
DECLARE_QGC_COLOR(buttonHighlight, "#e4e4e4", "#946120", "#3a3a3a", "#fff291")
DECLARE_QGC_COLOR(buttonBorder, "#9d9d9d", "#3A9BDC", "#707070", "#adadb8")
DECLARE_QGC_COLOR(buttonText, "#9d9d9d", "#333333", "#A6A6A6", "#ffffff")
DECLARE_QGC_COLOR(buttonHighlight, "#e4e4e4", "#3A9BDC", "#3a3a3a", "#fff291")
DECLARE_QGC_COLOR(buttonHighlightText, "#2c2c2c", "#ffffff", "#2c2c2c", "#000000")
DECLARE_QGC_COLOR(primaryButton, "#585858", "#8cb3be", "#585858", "#8cb3be")
DECLARE_QGC_COLOR(primaryButtonText, "#2c2c2c", "#000000", "#2c2c2c", "#000000")
DECLARE_QGC_COLOR(primaryButtonText, "#2c2c2c", "#333333", "#2c2c2c", "#000000")
DECLARE_QGC_COLOR(textField, "#ffffff", "#ffffff", "#707070", "#ffffff")
DECLARE_QGC_COLOR(textFieldText, "#808080", "#000000", "#000000", "#000000")
DECLARE_QGC_COLOR(mapButton, "#585858", "#000000", "#585858", "#000000")
DECLARE_QGC_COLOR(textFieldText, "#808080", "#333333", "#000000", "#000000")
DECLARE_QGC_COLOR(mapButton, "#585858", "#333333", "#585858", "#000000")
DECLARE_QGC_COLOR(mapButtonHighlight, "#585858", "#be781c", "#585858", "#be781c")
DECLARE_QGC_COLOR(mapIndicator, "#585858", "#be781c", "#585858", "#be781c")
DECLARE_QGC_COLOR(mapIndicatorChild, "#585858", "#766043", "#585858", "#766043")
Expand All @@ -86,7 +86,7 @@ void QGCPalette::_buildMap()
DECLARE_QGC_COLOR(statusPendingText, "#9d9d9d", "#000000", "#707070", "#ffffff")
DECLARE_QGC_COLOR(toolbarBackground, "#00ffffff", "#00ffffff", "#00222222", "#00222222")
DECLARE_QGC_COLOR(toolbarDivider, "#00000000", "#00000000", "#00000000", "#00000000")
DECLARE_QGC_COLOR(groupBorder, "#bbbbbb", "#bbbbbb", "#707070", "#707070")
DECLARE_QGC_COLOR(groupBorder, "#bbbbbb", "#3A9BDC", "#707070", "#707070")

// Colors not affecting by theming
// Disabled Enabled
Expand Down
14 changes: 7 additions & 7 deletions src/QmlControls/QGCRadioButton.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,28 @@ RadioButton {
font.family: ScreenTools.normalFontFamily
font.pointSize: ScreenTools.defaultFontPointSize

property color textColor: _qgcPal.text
property var _qgcPal: QGCPalette { colorGroupEnabled: enabled }
property color textColor: qgcPal.text
property bool _noText: text === ""

QGCPalette { id:qgcPal; colorGroupEnabled: enabled }

Copilot AI Dec 5, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing space after colon in property declaration. Should be id: qgcPal for consistency with other QML files in the codebase.

Suggested change
QGCPalette { id:qgcPal; colorGroupEnabled: enabled }
QGCPalette { id: qgcPal; colorGroupEnabled: enabled }

Copilot uses AI. Check for mistakes.

indicator: Rectangle {
implicitWidth: ScreenTools.radioButtonIndicatorSize
implicitHeight: width
color: "white"
border.color: "black"
color: qgcPal.button
border.color: qgcPal.buttonBorder
radius: height / 2
opacity: control.enabled ? 1 : 0.5
x: control.leftPadding
y: parent.height / 2 - height / 2

Rectangle {
anchors.centerIn: parent
// Width should be an odd number to be centralized by the parent properly
width: 2 * Math.floor(parent.width / 4) + 1
height: width
antialiasing: true
radius: height * 0.5
color: "black"
color: qgcPal.buttonHighlight
visible: control.checked
}
}
Expand All @@ -41,7 +42,6 @@ RadioButton {
font.pointSize: control.font.pointSize
font.bold: control.font.bold
color: control.textColor
opacity: enabled ? 1.0 : 0.3
verticalAlignment: Text.AlignVCenter
leftPadding: control.indicator.width + (_noText ? 0 : ScreenTools.defaultFontPixelWidth * 0.25)
}
Expand Down
51 changes: 0 additions & 51 deletions src/QmlControls/QGCSwitch.qml
View file
Open in desktop

This file was deleted.

58 changes: 42 additions & 16 deletions src/UI/AppSettings/QmlTest.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ Rectangle {

QGCPalette { id: qgcPal }

property var palette: QGCPalette { colorGroupEnabled: true }
property var enabledPalette: QGCPalette { colorGroupEnabled: true }
property var disabledPalette: QGCPalette { colorGroupEnabled: false }

Expand All @@ -41,14 +40,14 @@ Rectangle {

qgcPal.globalTheme = QGCPalette.Light
qgcPal.colorGroupEnabled = true
themeObj.light["enabled"] = exportPaletteColors(palette);
themeObj.light["enabled"] = exportPaletteColors(qgcPal);
qgcPal.colorGroupEnabled = false
themeObj.light["disabled"] = exportPaletteColors(palette);
themeObj.light["disabled"] = exportPaletteColors(qgcPal);
qgcPal.globalTheme = QGCPalette.Dark
qgcPal.colorGroupEnabled = true
themeObj.dark["enabled"] = exportPaletteColors(palette);
themeObj.dark["enabled"] = exportPaletteColors(qgcPal);
qgcPal.colorGroupEnabled = false
themeObj.dark["disabled"] = exportPaletteColors(palette);
themeObj.dark["disabled"] = exportPaletteColors(qgcPal);

qgcPal.globalTheme = oldTheme;
qgcPal.colorGroupEnabled = true;
Expand All @@ -63,7 +62,7 @@ Rectangle {
for(var i = 0; i < qgcPal.colors.length; i++) {
var cs = qgcPal.colors[i]
var csc = cs + 'Colors'
palToExport += 'DECLARE_QGC_COLOR(' + cs + ', \"' + palette[csc][1] + '\", \"' + palette[csc][0] + '\", \"' + palette[csc][3] + '\", \"' + palette[csc][2] + '\")\n'
palToExport += 'DECLARE_QGC_COLOR(' + cs + ', \"' + qgcPal[csc][1] + '\", \"' + qgcPal[csc][0] + '\", \"' + qgcPal[csc][3] + '\", \"' + qgcPal[csc][2] + '\")\n'
}
themeImportExportEdit.text = palToExport
}
Expand All @@ -78,10 +77,10 @@ Rectangle {
}
palToExport +=
'if (colorName == QStringLiteral(\"' + cs + '\")) {\n' +
' colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupEnabled] = QColor(\"' + palette[csc][2] + '\");\n' +
' colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupDisabled] = QColor(\"' + palette[csc][3] + '\");\n' +
' colorInfo[QGCPalette::Light][QGCPalette::ColorGroupEnabled] = QColor(\"' + palette[csc][0] + '\");\n' +
' colorInfo[QGCPalette::Light][QGCPalette::ColorGroupDisabled] = QColor(\"' + palette[csc][1] + '\");\n' +
' colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupEnabled] = QColor(\"' + qgcPal[csc][2] + '\");\n' +
' colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupDisabled] = QColor(\"' + qgcPal[csc][3] + '\");\n' +
' colorInfo[QGCPalette::Light][QGCPalette::ColorGroupEnabled] = QColor(\"' + qgcPal[csc][0] + '\");\n' +
' colorInfo[QGCPalette::Light][QGCPalette::ColorGroupDisabled] = QColor(\"' + qgcPal[csc][1] + '\");\n' +
'}'
}
themeImportExportEdit.text = palToExport
Expand All @@ -94,14 +93,14 @@ Rectangle {

qgcPal.globalTheme = QGCPalette.Light
qgcPal.colorGroupEnabled = true
fillPalette(palette, jsonObj.light.enabled)
fillPalette(qgcPal, jsonObj.light.enabled)
qgcPal.colorGroupEnabled = false
fillPalette(palette, jsonObj.light.disabled);
fillPalette(qgcPal, jsonObj.light.disabled);
qgcPal.globalTheme = QGCPalette.Dark
qgcPal.colorGroupEnabled = true
fillPalette(palette, jsonObj.dark.enabled);
fillPalette(qgcPal, jsonObj.dark.enabled);
qgcPal.colorGroupEnabled = false
fillPalette(palette, jsonObj.dark.disabled);
fillPalette(qgcPal, jsonObj.dark.disabled);

qgcPal.globalTheme = oldTheme;
qgcPal.colorGroupEnabled = true;
Expand Down Expand Up @@ -311,8 +310,8 @@ Rectangle {

// Populate the model with all color names in the global palette
Component.onCompleted: {
for(var colorNameStr in palette) {
if(palette[colorNameStr].r !== undefined) {
for(var colorNameStr in enabledPalette) {
if(enabledPalette[colorNameStr].r !== undefined) {
paletteColorList.append({ colorName: colorNameStr });
}
}
Expand Down Expand Up @@ -571,6 +570,33 @@ Rectangle {
}
}

// QGCCheckBoxSlider
Loader {
sourceComponent: ctlRowHeader
property string text: "QGCCheckBoxSlider"
}
Rectangle {
width: ctlPrevColumn._colWidth
height: ctlPrevColumn._height
color: ctlPrevColumn._bkColor
QGCCheckBoxSlider {
anchors.fill: parent
anchors.margins: 5
text: qsTr("Check Box Slider")
}
}
Rectangle {
width: ctlPrevColumn._colWidth
height: ctlPrevColumn._height
color: ctlPrevColumn._bkColor
QGCCheckBoxSlider {
anchors.fill: parent
anchors.margins: 5
text: qsTr("Check Box Slider")
enabled: false
}
}

// QGCTextField
Loader {
sourceComponent: ctlRowHeader
Expand Down
Loading