ControlCenter: add colorize distro toggle

Assets/Translations/de.json

@@ -105,6 +105,10 @@
         "use-distro-logo": {
           "description": "Logo Ihrer Distribution anstelle eines benutzerdefinierten Symbols verwenden.",
           "label": "Distro-Logo anstelle von Symbol verwenden"
+        },
+        "colorize-distro-logo": {
+          "description": "Wende die Designfarben auf das Logo deiner Distribution an.",
+          "label": "Distro-Logo einfärben"
         }
       },
       "custom-button": {

Assets/Translations/en.json

@@ -105,6 +105,10 @@
         "use-distro-logo": {
           "description": "Use your distribution's logo instead of a custom icon.",
           "label": "Use distro logo instead of icon"
+        },
+        "colorize-distro-logo": {
+          "description": "Apply theme colors to your distribution logo.",
+          "label": "Colorize distro logo"
         }
       },
       "custom-button": {

Assets/Translations/es.json

@@ -105,6 +105,10 @@
         "use-distro-logo": {
           "description": "Usar el logo de tu distribución en lugar de un icono personalizado.",
           "label": "Usar logo de la distribución en lugar de icono"
+        },
+        "colorize-distro-logo": {
+          "description": "Aplica los colores del tema a tu logotipo de distribución.",
+          "label": "Colorear logotipo de la distribución"
         }
       },
       "custom-button": {

Assets/Translations/fr.json

@@ -105,6 +105,10 @@
         "use-distro-logo": {
           "description": "Utiliser le logo de votre distribution au lieu d'une icône personnalisée.",
           "label": "Utiliser le logo de la distribution au lieu de l'icône"
+        },
+        "colorize-distro-logo": {
+          "description": "Appliquez les couleurs du thème au logo de votre distribution.",
+          "label": "Coloriser le logo de la distribution"
         }
       },
       "custom-button": {

Assets/Translations/pt.json

@@ -105,6 +105,10 @@
         "use-distro-logo": {
           "description": "Usar o logo da sua distribuição em vez de um ícone personalizado.",
           "label": "Usar logo da distribuição em vez de ícone"
+        },
+        "colorize-distro-logo": {
+          "description": "Aplicar as cores do tema ao logotipo da sua distribuição.",
+          "label": "Colorir logo da distribuição"
         }
       },
       "custom-button": {

Assets/Translations/tr.json

@@ -105,6 +105,10 @@
         "use-distro-logo": {
           "description": "Özel ikon yerine dağıtımınızın logosunu kullanın.",
           "label": "Dağıtım logosunu ikon yerine kullan"
+        },
+        "colorize-distro-logo": {
+          "description": "Dağıtım logonuza tema renklerini uygula.",
+          "label": "Dağıtım logosunu renklendir"
         }
       },
       "custom-button": {

Assets/Translations/uk-UA.json

@@ -105,6 +105,10 @@
         "use-distro-logo": {
           "description": "Використовувати логотип вашого дистрибутива замість власного значка.",
           "label": "Використовувати логотип дистрибутива замість значка"
+        },
+        "colorize-distro-logo": {
+          "description": "Застосувати кольори теми до логотипа вашого дистрибутива.",
+          "label": "Розфарбовувати логотип дистрибутива"
         }
       },
       "custom-button": {

Assets/Translations/zh-CN.json

@@ -105,6 +105,10 @@
         "use-distro-logo": {
           "description": "使用您的发行版徽标而不是自定义图标。",
           "label": "使用发行版徽标而不是图标"
+        },
+        "colorize-distro-logo": {
+          "description": "将主题颜色应用到您的发行版徽标。",
+          "label": "为发行版徽标着色"
         }
       },
       "custom-button": {

Modules/Bar/Widgets/ControlCenter.qml

@@ -32,6 +32,11 @@ NIconButton {
   readonly property string customIcon: widgetSettings.icon || widgetMetadata.icon
   readonly property bool useDistroLogo: (widgetSettings.useDistroLogo !== undefined) ? widgetSettings.useDistroLogo : widgetMetadata.useDistroLogo
   readonly property string customIconPath: widgetSettings.customIconPath || ""
+  readonly property bool colorizeDistroLogo: {
+    if (widgetSettings.colorizeDistroLogo !== undefined)
+      return widgetSettings.colorizeDistroLogo
+    return widgetMetadata.colorizeDistroLogo !== undefined ? widgetMetadata.colorizeDistroLogo : false
+  }
 
   // If we have a custom path or distro logo, don't use the theme icon.
   icon: (customIconPath === "" && !useDistroLogo) ? customIcon : ""
@@ -72,5 +77,12 @@ NIconButton {
     visible: source !== ""
     smooth: true
     asynchronous: true
+    layer.enabled: useDistroLogo && colorizeDistroLogo
+    layer.effect: ShaderEffect {
+      property color targetColor: Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mSurfaceVariant
+      property real colorizeMode: 1.0
+
+      fragmentShader: Qt.resolvedUrl(Quickshell.shellDir + "/Shaders/qsb/appicon_colorize.frag.qsb")
+    }
   }
 }

Modules/Panels/Settings/Bar/WidgetSettings/ControlCenterSettings.qml

@@ -17,12 +17,14 @@ ColumnLayout {
   property string valueIcon: widgetData.icon !== undefined ? widgetData.icon : widgetMetadata.icon
   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)
 
   function saveSettings() {
     var settings = Object.assign({}, widgetData || {})
     settings.icon = valueIcon
     settings.useDistroLogo = valueUseDistroLogo
     settings.customIconPath = valueCustomIconPath
+    settings.colorizeDistroLogo = valueColorizeDistroLogo
     return settings
   }
 
@@ -39,6 +41,16 @@ ColumnLayout {
     }
   }
 
+  NToggle {
+    visible: valueUseDistroLogo
+    label: I18n.tr("bar.widget-settings.control-center.colorize-distro-logo.label")
+    description: I18n.tr("bar.widget-settings.control-center.colorize-distro-logo.description")
+    checked: valueColorizeDistroLogo
+    onToggled: function (checked) {
+      valueColorizeDistroLogo = checked
+    }
+  }
+
   RowLayout {
     spacing: Style.marginM
 

Modules/Panels/Settings/Tabs/ColorSchemeTab.qml

@@ -761,10 +761,10 @@ ColumnLayout {
       NCheckbox {
         label: "Spicetify"
         description: ProgramCheckerService.spicetifyAvailable ? I18n.tr("settings.color-scheme.templates.programs.spicetify.description", {
-                                                                     "filepath": "~/.config/spicetify/Themes/Comfy/color.ini"
-                                                                   }) : I18n.tr("settings.color-scheme.templates.programs.spicetify.description-missing", {
-                                                                                  "app": "spicetify"
-                                                                                })
+                                                                          "filepath": "~/.config/spicetify/Themes/Comfy/color.ini"
+                                                                        }) : I18n.tr("settings.color-scheme.templates.programs.spicetify.description-missing", {
+                                                                                       "app": "spicetify"
+                                                                                     })
         checked: Settings.data.templates.spicetify
         enabled: ProgramCheckerService.spicetifyAvailable
         opacity: ProgramCheckerService.spicetifyAvailable ? 1.0 : 0.6

Services/Theming/TemplateRegistry.qml

@@ -151,16 +151,15 @@ Singleton {
       "outputs": [{
           "path": "~/.vscode/extensions/hyprluna.hyprluna-theme-1.0.2/themes/hyprluna.json"
         }]
-    },
-    {
-        "id": "spicetify",
-        "name": "Spicetify",
-        "category": "applications",
-        "input": "spicetify.ini",
-        "outputs": [{
-            "path": "~/.config/spicetify/Themes/Comfy/color.ini"
+    }, {
+      "id": "spicetify",
+      "name": "Spicetify",
+      "category": "applications",
+      "input": "spicetify.ini",
+      "outputs": [{
+          "path": "~/.config/spicetify/Themes/Comfy/color.ini"
         }],
-        "postProcess": () => `spicetify -q apply --no-restart`
+      "postProcess": () => `spicetify -q apply --no-restart`
     }]
 
   // Extract Discord clients for ProgramCheckerService compatibility

Services/UI/BarWidgetRegistry.qml

@@ -86,7 +86,8 @@ Singleton {
                                     "allowUserSettings": true,
                                     "useDistroLogo": false,
                                     "icon": "noctalia",
-                                    "customIconPath": ""
+                                    "customIconPath": "",
+                                    "colorizeDistroLogo": false
                                   },
                                   "CustomButton": {
                                     "allowUserSettings": true,