Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-04-30 09:32:05 -04:00
Code Packages Releases Activity

feat(system-tray): add icon tinting (#2266)

Browse Source
This commit is contained in:
Archit Arora
2026-04-25 21:36:56 +05:30
committed by GitHub
parent dd3f17f51e
commit bd5276b40d
5 changed files with 195 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
quickshell/Common/SettingsData.qml
View File

@@ -215,7 +215,9 @@ Singleton {
property int selectedGpuIndex: 0
property var enabledGpuPciIds: []
property bool showSystemTray: true
property bool systemTrayMonochromeIcons: false
property string systemTrayIconTintMode: "none"
property int systemTrayIconTintSaturation: 50
property int systemTrayIconTintStrength: 135
property bool showClock: true
property bool showNotificationButton: true
property bool showBattery: true

4
quickshell/Common/settings/SettingsSpec.js
View File

@@ -81,7 +81,9 @@ var SPEC = {
selectedGpuIndex: { def: 0 },
enabledGpuPciIds: { def: [] },
showSystemTray: { def: true },
systemTrayMonochromeIcons: { def: false },
systemTrayIconTintMode: { def: "none" },
systemTrayIconTintSaturation: { def: 50 },
systemTrayIconTintStrength: { def: 135 },
showClock: { def: true },
showNotificationButton: { def: true },
showBattery: { def: true },

77
quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml
View File

@@ -152,6 +152,59 @@ BasePill {
item: item
}))
readonly property var hiddenBarItems: allSortedTrayItems.filter(item => SessionData.isHiddenTrayId(root.getTrayItemKey(item)))
readonly property string trayIconTintMode: {
const configuredMode = SettingsData.systemTrayIconTintMode || "none";
switch (configuredMode) {
case "monochrome":
case "primary":
case "secondary":
return configuredMode;
default:
return "none";
}
}
readonly property bool trayIconTintEnabled: trayIconTintMode !== "none"
readonly property real trayIconTintSaturationAmount: {
const raw = SettingsData.systemTrayIconTintSaturation;
const value = (raw === undefined || raw === null) ? 50 : raw;
return Math.max(0, Math.min(100, value)) / 100;
}
readonly property real trayIconTintStrengthAmount: {
const raw = SettingsData.systemTrayIconTintStrength;
const value = (raw === undefined || raw === null) ? 135 : raw;
return Math.max(0, Math.min(200, value)) / 100;
}
readonly property real trayIconSaturation: {
switch (trayIconTintMode) {
case "monochrome":
return -1;
case "primary":
case "secondary":
return -root.trayIconTintSaturationAmount;
default:
return 0;
}
}
readonly property real trayIconColorization: {
switch (trayIconTintMode) {
case "primary":
case "secondary":
return root.trayIconTintStrengthAmount;
default:
return 0;
}
}
readonly property color trayIconTintColor: {
switch (trayIconTintMode) {
case "primary":
return Theme.primary;
case "secondary":
return Theme.secondary;
default:
return Theme.surfaceText;
}
}
readonly property bool reverseInlineHorizontal: !useOverflowPopup && !isVerticalOrientation && section === "right"
readonly property bool reverseInlineVertical: !useOverflowPopup && isVerticalOrientation && section === "right"
readonly property var displayedMainBarItems: reverseInlineHorizontal ? [...mainBarItems].reverse() : mainBarItems
@@ -367,9 +420,11 @@ BasePill {
smooth: true
mipmap: true
visible: status === Image.Ready
layer.enabled: SettingsData.systemTrayMonochromeIcons
layer.enabled: root.trayIconTintEnabled
layer.effect: MultiEffect {
saturation: -1
saturation: root.trayIconSaturation
colorization: root.trayIconColorization
colorizationColor: root.trayIconTintColor
}
}
@@ -586,9 +641,11 @@ BasePill {
smooth: true
mipmap: true
visible: status === Image.Ready
layer.enabled: SettingsData.systemTrayMonochromeIcons
layer.enabled: root.trayIconTintEnabled
layer.effect: MultiEffect {
saturation: -1
saturation: root.trayIconSaturation
colorization: root.trayIconColorization
colorizationColor: root.trayIconTintColor
}
}
@@ -718,9 +775,11 @@ BasePill {
smooth: true
mipmap: true
visible: status === Image.Ready
layer.enabled: SettingsData.systemTrayMonochromeIcons
layer.enabled: root.trayIconTintEnabled
layer.effect: MultiEffect {
saturation: -1
saturation: root.trayIconSaturation
colorization: root.trayIconColorization
colorizationColor: root.trayIconTintColor
}
}
@@ -1223,9 +1282,11 @@ BasePill {
smooth: true
mipmap: true
visible: status === Image.Ready
layer.enabled: SettingsData.systemTrayMonochromeIcons
layer.enabled: root.trayIconTintEnabled
layer.effect: MultiEffect {
saturation: -1
saturation: root.trayIconSaturation
colorization: root.trayIconColorization
colorizationColor: root.trayIconTintColor
}
}

100
quickshell/Modules/Settings/DankBarTab.qml
View File

@@ -1066,13 +1066,103 @@ Item {
})
}
SettingsToggleCard {
SettingsCard {
iconName: "filter_b_and_w"
title: I18n.tr("Monochrome System Tray Icons")
description: I18n.tr("Desaturate all system tray icons for a uniform monochrome look")
title: I18n.tr("System Tray Icon Tint")
settingKey: "trayIconTint"
visible: selectedBarConfig?.enabled
checked: SettingsData.systemTrayMonochromeIcons
onToggled: checked => SettingsData.set("systemTrayMonochromeIcons", checked)
StyledText {
text: I18n.tr("Choose monochrome or a theme color tint for system tray icons")
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
wrapMode: Text.WordWrap
width: parent.width
horizontalAlignment: Text.AlignLeft
}
SettingsButtonGroupRow {
text: I18n.tr("Mode")
model: [I18n.tr("None"), I18n.tr("Monochrome"), I18n.tr("Primary"), I18n.tr("Secondary")]
currentIndex: {
let mode = SettingsData.systemTrayIconTintMode || "none";
switch (mode) {
case "monochrome":
return 1;
case "primary":
return 2;
case "secondary":
return 3;
default:
return 0;
}
}
onSelectionChanged: (index, selected) => {
if (!selected)
return;
let mode = "none";
switch (index) {
case 1:
mode = "monochrome";
break;
case 2:
mode = "primary";
break;
case 3:
mode = "secondary";
break;
}
SettingsData.set("systemTrayIconTintMode", mode);
}
}
SettingsSliderRow {
id: trayTintSaturationSlider
text: I18n.tr("Tint Saturation")
description: I18n.tr("Controls how much original icon color is removed before applying tint")
visible: {
const mode = SettingsData.systemTrayIconTintMode || "none";
return mode === "primary" || mode === "secondary";
}
value: SettingsData.systemTrayIconTintSaturation ?? 50
minimum: 0
maximum: 100
unit: "%"
defaultValue: 50
onSliderDragFinished: finalValue => SettingsData.set("systemTrayIconTintSaturation", finalValue)
Binding {
target: trayTintSaturationSlider
property: "value"
value: SettingsData.systemTrayIconTintSaturation ?? 50
restoreMode: Binding.RestoreBinding
}
}
SettingsSliderRow {
id: trayTintStrengthSlider
text: I18n.tr("Tint Strength")
description: I18n.tr("Controls how strongly the selected tint color is applied")
visible: {
const mode = SettingsData.systemTrayIconTintMode || "none";
return mode === "primary" || mode === "secondary";
}
value: SettingsData.systemTrayIconTintStrength ?? 135
minimum: 0
maximum: 200
unit: "%"
defaultValue: 135
onSliderDragFinished: finalValue => SettingsData.set("systemTrayIconTintStrength", finalValue)
Binding {
target: trayTintStrengthSlider
property: "value"
value: SettingsData.systemTrayIconTintStrength ?? 135
restoreMode: Binding.RestoreBinding
}
}
}
SettingsToggleCard {

25
quickshell/translations/settings_search_index.json
View File

@@ -914,6 +914,31 @@
],
"icon": "visibility_off"
},
{
"section": "trayIconTint",
"label": "System Tray Icon Tint",
"tabIndex": 3,
"category": "Dank Bar",
"keywords": [
"bar",
"dank",
"icon",
"icons",
"monochrome",
"panel",
"primary",
"secondary",
"saturation",
"status",
"statusbar",
"strength",
"taskbar",
"tint",
"tray"
],
"icon": "filter_b_and_w",
"description": "Choose monochrome or a theme color tint for system tray icons"
},
{
"section": "workspaceDragReorder",
"label": "Drag to Reorder",