zoriya/noctalia-shell
1
0
Fork 0
mirror of https://github.com/zoriya/noctalia-shell.git synced 2026-05-26 07:50:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(controlcenter): Add system icon colorization

Browse Source
This commit is contained in:
loner
2025-11-29 12:19:48 +08:00
parent 3db394c80a
commit 01d42e55f3
4 changed files with 63 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Assets/Translations/en.json
+9
View File
@@ -106,6 +106,10 @@
"description": "Apply theme colors to your distribution logo.",
"label": "Colorize distro logo"
},
"color-selection": {
"description": "Apply theme colors to icons.",
"label": "Select Color"
},
"icon": {
"description": "Select an icon from the library or a custom file.",
"label": "Icon"
@@ -114,6 +118,10 @@
"use-distro-logo": {
"description": "Use your distribution's logo instead of a custom icon.",
"label": "Use distro logo instead of icon"
},
"colorize-system-icon": {
"description": "Apply theme colors to system icons.",
"label": "Colorize system icon"
}
},
"custom-button": {
@@ -542,6 +550,7 @@
},
"colors": {
"error": "Error",
"none": "None",
"onSurface": "On Surface",
"primary": "Primary",
"secondary": "Secondary",
Modules/Bar/Widgets/ControlCenter.qml
+33 -2
View File
@@ -39,6 +39,35 @@ NIconButton {
return widgetSettings.colorizeDistroLogo;
return widgetMetadata.colorizeDistroLogo !== undefined ? widgetMetadata.colorizeDistroLogo : false;
}
readonly property string colorizeSystemIcon: {
if (widgetSettings.colorizeSystemIcon !== undefined)
return widgetSettings.colorizeSystemIcon;
return widgetMetadata.colorizeSystemIcon !== undefined ? widgetMetadata.colorizeSystemIcon : "none";
}
readonly property bool systemIconColorizingEnabled: (customIconPath === "" && !useDistroLogo) && colorizeSystemIcon !== "none"
readonly property bool distroLogoColorizingEnabled: useDistroLogo && colorizeDistroLogo && colorizeSystemIcon !== "none"
readonly property bool isColorizing: systemIconColorizingEnabled || distroLogoColorizingEnabled
readonly property color iconColor: {
if (!isColorizing) return Color.mOnSurface;
switch (colorizeSystemIcon) {
case "primary": return Color.mPrimary;
case "secondary": return Color.mSecondary;
case "tertiary": return Color.mTertiary;
case "error": return Color.mError;
default: return Color.mOnSurface;
}
}
readonly property color iconHoverColor: {
if (!isColorizing) return Color.mOnHover;
switch (colorizeSystemIcon) {
case "primary": return Qt.darker(Color.mPrimary, 1.2);
case "secondary": return Qt.darker(Color.mSecondary, 1.2);
case "tertiary": return Qt.darker(Color.mTertiary, 1.2);
case "error": return Qt.darker(Color.mError, 1.2);
default: return Color.mOnHover;
}
}
// If we have a custom path or distro logo, don't use the theme icon.
icon: (customIconPath === "" && !useDistroLogo) ? customIcon : ""
@@ -48,8 +77,9 @@ NIconButton {
applyUiScale: false
density: Settings.data.bar.density
colorBg: Style.capsuleColor
colorFg: Color.mOnSurface
colorFg: iconColor
colorBgHover: useDistroLogo ? Color.mSurfaceVariant : Color.mHover
colorFgHover: iconHoverColor
colorBorder: Color.transparent
colorBorderHover: useDistroLogo ? Color.mHover : Color.transparent
@@ -126,7 +156,8 @@ NIconButton {
asynchronous: true
layer.enabled: useDistroLogo && colorizeDistroLogo
layer.effect: ShaderEffect {
property color targetColor: Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mSurfaceVariant
property color targetColor: distroLogoColorizingEnabled ? iconColor :
(Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mSurfaceVariant)
property real colorizeMode: 2.0
fragmentShader: Qt.resolvedUrl(Quickshell.shellDir + "/Shaders/qsb/appicon_colorize.frag.qsb")
Modules/Panels/Settings/Bar/WidgetSettings/ControlCenterSettings.qml
+19
View File
@@ -18,6 +18,7 @@ ColumnLayout {
property bool valueUseDistroLogo: widgetData.useDistroLogo !== undefined ? widgetData.useDistroLogo : widgetMetadata.useDistroLogo
property string valueCustomIconPath: widgetData.customIconPath !== undefined ? widgetData.customIconPath : ""
property bool valueColorizeDistroLogo: widgetData.colorizeDistroLogo !== undefined ? widgetData.colorizeDistroLogo : (widgetMetadata.colorizeDistroLogo !== undefined ? widgetMetadata.colorizeDistroLogo : false)
property string valueColorizeSystemIcon: widgetData.colorizeSystemIcon !== undefined ? widgetData.colorizeSystemIcon : (widgetMetadata.colorizeSystemIcon !== undefined ? widgetMetadata.colorizeSystemIcon : "none")
function saveSettings() {
var settings = Object.assign({}, widgetData || {});
@@ -25,6 +26,7 @@ ColumnLayout {
settings.useDistroLogo = valueUseDistroLogo;
settings.customIconPath = valueCustomIconPath;
settings.colorizeDistroLogo = valueColorizeDistroLogo;
settings.colorizeSystemIcon = valueColorizeSystemIcon;
return settings;
}
@@ -51,6 +53,23 @@ ColumnLayout {
}
}
NComboBox {
visible: (!valueUseDistroLogo && valueIcon !== "" && valueCustomIconPath === "") || (valueUseDistroLogo && valueColorizeDistroLogo)
label: !valueUseDistroLogo ? I18n.tr("bar.widget-settings.control-center.colorize-system-icon.label") : I18n.tr("bar.widget-settings.control-center.color-selection.label")
description: I18n.tr("bar.widget-settings.control-center.color-selection.description")
model: [
{ "name": I18n.tr("options.colors.none"), "key": "none" },
{ "name": I18n.tr("options.colors.primary"), "key": "primary" },
{ "name": I18n.tr("options.colors.secondary"), "key": "secondary" },
{ "name": I18n.tr("options.colors.tertiary"), "key": "tertiary" },
{ "name": I18n.tr("options.colors.error"), "key": "error" }
]
currentKey: valueColorizeSystemIcon
onSelected: function(key) {
valueColorizeSystemIcon = key;
}
}
RowLayout {
spacing: Style.marginM
Services/UI/BarWidgetRegistry.qml
+2 -1
View File
@@ -111,7 +111,8 @@ Singleton {
"useDistroLogo": false,
"icon": "noctalia",
"customIconPath": "",
"colorizeDistroLogo": false
"colorizeDistroLogo": false,
"colorizeSystemIcon": "none"
},
"CustomButton": {
"allowUserSettings": true,