From 36a38c6a34862562555ddffa3c00af67552e4650 Mon Sep 17 00:00:00 2001 From: Nam Anh Date: Sat, 21 Mar 2026 08:17:13 +0700 Subject: [PATCH 1/3] fix(systray): tint icon on switching theme --- modules/bar/systray/SysTrayItem.qml | 6 ++++++ modules/components/Tinted.qml | 13 +++++++------ 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/modules/bar/systray/SysTrayItem.qml b/modules/bar/systray/SysTrayItem.qml index 0b725b1a..2a6cf597 100644 --- a/modules/bar/systray/SysTrayItem.qml +++ b/modules/bar/systray/SysTrayItem.qml @@ -164,11 +164,17 @@ MouseArea { width: parent.width height: parent.height smooth: true + // Keep the raw icon hidden when the tinted layer is active. + opacity: systrayIconTint.active ? 0 : 1 } Tinted { + id: systrayIconTint sourceItem: trayIcon anchors.fill: trayIcon + active: true + fullTint: true + tintColor: Colors.overBackground } StyledToolTip { diff --git a/modules/components/Tinted.qml b/modules/components/Tinted.qml index 7144741f..add3ddb0 100644 --- a/modules/components/Tinted.qml +++ b/modules/components/Tinted.qml @@ -8,6 +8,7 @@ Item { id: root property var sourceItem: null // The icon item to tint property bool fullTint: false // If true, apply solid primary color instead of shader + property color tintColor: Styling.srItem("overprimary") // Subset of colors for optimization (consistent with TintedWallpaper.qml) readonly property var optimizedPalette: [ @@ -26,11 +27,11 @@ Item { // Palette generation for the shader Item { id: paletteSourceItem - visible: true + visible: true width: root.optimizedPalette.length height: 1 opacity: 0 - + Row { anchors.fill: parent Repeater { @@ -69,14 +70,14 @@ Item { hideSource: true live: false // Static content - use scheduleUpdate() when source changes } - + // Update texture when sourceItem changes Connections { target: root.sourceItem function onSourceChanged() { internalSource.scheduleUpdate(); } function onStatusChanged() { internalSource.scheduleUpdate(); } } - + // Also update when this component becomes visible or sourceItem changes Connections { target: root @@ -91,14 +92,14 @@ Item { source: internalSource brightness: 1.0 colorization: 1.0 - colorizationColor: Styling.srItem("overprimary") + colorizationColor: root.tintColor } // Shader-based tint ShaderEffect { visible: !root.fullTint anchors.fill: parent - + property var source: internalSource property var paletteTexture: paletteTextureSource property real paletteSize: root.optimizedPalette.length From e55c9a3a8a96e77fbcbcb68aa90d53a69d1e3f09 Mon Sep 17 00:00:00 2001 From: Nam Anh Date: Sat, 21 Mar 2026 09:17:53 +0700 Subject: [PATCH 2/3] style(systray): keep tint color option --- modules/bar/systray/SysTrayItem.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/bar/systray/SysTrayItem.qml b/modules/bar/systray/SysTrayItem.qml index 2a6cf597..db6080a3 100644 --- a/modules/bar/systray/SysTrayItem.qml +++ b/modules/bar/systray/SysTrayItem.qml @@ -174,7 +174,7 @@ MouseArea { anchors.fill: trayIcon active: true fullTint: true - tintColor: Colors.overBackground + tintColor: Config.tintIcons ? Styling.srItem("overprimary") : Colors.overBackground } StyledToolTip { From 7e990fbac20c4ba930b0907628018c9040d0410a Mon Sep 17 00:00:00 2001 From: Nam Anh Date: Sat, 21 Mar 2026 09:58:27 +0700 Subject: [PATCH 3/3] feat(systray): add toggle to match theme color --- config/Config.qml | 16 +++-- config/defaults/theme.js | 1 + modules/bar/systray/SysTrayItem.qml | 8 ++- .../widgets/dashboard/controls/ThemePanel.qml | 69 +++++++++++++++++++ 4 files changed, 86 insertions(+), 8 deletions(-) diff --git a/config/Config.qml b/config/Config.qml index b9a581ec..3e0c0373 100644 --- a/config/Config.qml +++ b/config/Config.qml @@ -114,6 +114,7 @@ Singleton { property string monoFont: "Iosevka Nerd Font Mono" property int monoFontSize: 14 property bool tintIcons: false + property bool matchSysTrayIconColor: false property bool enableCorners: true property int animDuration: 300 property real shadowOpacity: 0.5 @@ -1099,7 +1100,7 @@ Singleton { if (current.ambxst.dashboard && typeof current.ambxst.dashboard === "object" && !current.ambxst.dashboard.modifiers) { console.log("Migrating nested ambxst binds to flat structure..."); const nested = current.ambxst.dashboard; - + // Map old names to new names and update arguments if (nested.widgets) { current.ambxst.launcher = nested.widgets; @@ -2992,6 +2993,7 @@ Singleton { property string defaultFont: theme.font property int animDuration: Services.GameModeService.toggled ? 0 : theme.animDuration property bool tintIcons: theme.tintIcons + property bool matchSysTrayIconColor: theme.matchSysTrayIconColor // Handle lightMode changes onLightModeChanged: { @@ -3037,7 +3039,7 @@ Singleton { // Trigger save GlobalStates.markShellChanged(); } - } + } // If notch moves top else if (notchPosition === "top") { // Restore Dock if displaced @@ -3139,20 +3141,20 @@ Singleton { function resolveColor(colorValue) { if (!colorValue) return "transparent"; // Fallback - + if (isHexColor(colorValue)) { return colorValue; } - + // Check Colors singleton if (typeof Colors === 'undefined' || !Colors) return "transparent"; - - return Colors[colorValue] || "transparent"; + + return Colors[colorValue] || "transparent"; } function resolveColorWithOpacity(colorValue, opacity) { if (!colorValue) return Qt.rgba(0,0,0,0); - + const color = isHexColor(colorValue) ? Qt.color(colorValue) : (Colors[colorValue] || Qt.color("transparent")); return Qt.rgba(color.r, color.g, color.b, opacity); } diff --git a/config/defaults/theme.js b/config/defaults/theme.js index ec7003db..0ac8e3dc 100644 --- a/config/defaults/theme.js +++ b/config/defaults/theme.js @@ -9,6 +9,7 @@ var data = { "monoFont": "Iosevka Nerd Font Mono", "monoFontSize": 14, "tintIcons": false, + "matchSysTrayIconColor": false, "enableCorners": true, "animDuration": 300, "shadowOpacity": 0.5, diff --git a/modules/bar/systray/SysTrayItem.qml b/modules/bar/systray/SysTrayItem.qml index db6080a3..bb5b2fd4 100644 --- a/modules/bar/systray/SysTrayItem.qml +++ b/modules/bar/systray/SysTrayItem.qml @@ -172,11 +172,17 @@ MouseArea { id: systrayIconTint sourceItem: trayIcon anchors.fill: trayIcon - active: true + active: Config.matchSysTrayIconColor fullTint: true tintColor: Config.tintIcons ? Styling.srItem("overprimary") : Colors.overBackground } + Tinted { + sourceItem: trayIcon + anchors.fill: trayIcon + active: Config.tintIcons && !Config.matchSysTrayIconColor + } + StyledToolTip { show: root.isHovered tooltipText: root.item.tooltipTitle || root.item.title diff --git a/modules/widgets/dashboard/controls/ThemePanel.qml b/modules/widgets/dashboard/controls/ThemePanel.qml index e622dff3..c98cdefd 100644 --- a/modules/widgets/dashboard/controls/ThemePanel.qml +++ b/modules/widgets/dashboard/controls/ThemePanel.qml @@ -402,6 +402,75 @@ Item { } } + // Match Systray Icon Color toggle + RowLayout { + Layout.fillWidth: true + spacing: 8 + + Text { + text: "Theme System Tray Icons" + font.family: Config.theme.font + font.pixelSize: Styling.fontSize(0) + color: Colors.overBackground + Layout.fillWidth: true + } + + Switch { + id: matchSysTrayIconColorSwitch + checked: Config.theme.matchSysTrayIconColor + + readonly property bool configValue: Config.theme.matchSysTrayIconColor + + onConfigValueChanged: { + if (checked !== configValue) { + checked = configValue; + } + } + + onCheckedChanged: { + if (checked !== Config.theme.matchSysTrayIconColor) { + GlobalStates.markThemeChanged(); + Config.theme.matchSysTrayIconColor = checked; + } + } + + indicator: Rectangle { + implicitWidth: 40 + implicitHeight: 20 + x: matchSysTrayIconColorSwitch.leftPadding + y: parent.height / 2 - height / 2 + radius: height / 2 + color: matchSysTrayIconColorSwitch.checked ? Styling.srItem("overprimary") : Colors.surfaceBright + border.color: matchSysTrayIconColorSwitch.checked ? Styling.srItem("overprimary") : Colors.outline + + Behavior on color { + enabled: Config.animDuration > 0 + ColorAnimation { + duration: Config.animDuration / 2 + } + } + + Rectangle { + x: matchSysTrayIconColorSwitch.checked ? parent.width - width - 2 : 2 + y: 2 + width: parent.height - 4 + height: width + radius: width / 2 + color: matchSysTrayIconColorSwitch.checked ? Colors.background : Colors.overSurfaceVariant + + Behavior on x { + enabled: Config.animDuration > 0 + NumberAnimation { + duration: Config.animDuration / 2 + easing.type: Easing.OutCubic + } + } + } + } + background: null + } + } + // Enable Corners toggle RowLayout { Layout.fillWidth: true