osd: reverse media playback icons and handle screen changes

light/dark mode (e.g. catpuccin will react to light/dark changes and
remember theme per-mode)
fixes #1094

core/internal/matugen/matugen.go

@@ -80,6 +80,7 @@ func (c *ColorMode) GTKTheme() string {
 var (
 	matugenVersionOnce sync.Once
 	matugenSupportsCOE bool
+	matugenIsV4        bool
 )
 
 type Options struct {
@@ -537,9 +538,13 @@ func checkMatugenVersion() {
 		}
 
 		matugenSupportsCOE = major > 3 || (major == 3 && minor >= 1)
+		matugenIsV4 = major >= 4
 		if matugenSupportsCOE {
 			log.Infof("Matugen %s supports --continue-on-error", versionStr)
 		}
+		if matugenIsV4 {
+			log.Infof("Matugen %s: using v4 flags", versionStr)
+		}
 	})
 }
 
@@ -549,6 +554,9 @@ func runMatugen(args []string) error {
 	if matugenSupportsCOE {
 		args = append([]string{"--continue-on-error"}, args...)
 	}
+	if matugenIsV4 {
+		args = append(args, "--source-color-index", "0")
+	}
 
 	cmd := exec.Command("matugen", args...)
 	cmd.Stdout = os.Stdout
@@ -557,6 +565,8 @@ func runMatugen(args []string) error {
 }
 
 func runMatugenDryRun(opts *Options) (string, error) {
+	checkMatugenVersion()
+
 	var args []string
 	switch opts.Kind {
 	case "hex":
@@ -565,6 +575,9 @@ func runMatugenDryRun(opts *Options) (string, error) {
 		args = []string{opts.Kind, opts.Value}
 	}
 	args = append(args, "-m", "dark", "-t", opts.MatugenType, "--json", "hex", "--dry-run")
+	if matugenIsV4 {
+		args = append(args, "--source-color-index", "0", "--old-json-output")
+	}
 
 	cmd := exec.Command("matugen", args...)
 	output, err := cmd.Output()

core/internal/server/themes/list_installed.go

@@ -92,21 +92,13 @@ func HandleListInstalled(conn net.Conn, req models.Request) {
 		return
 	}
 
-	registry, err := themes.NewRegistry()
-	if err != nil {
-		models.RespondError(conn, req.ID, fmt.Sprintf("failed to create registry: %v", err))
-		return
-	}
-
-	allThemes, err := registry.List()
-	if err != nil {
-		models.RespondError(conn, req.ID, fmt.Sprintf("failed to list themes: %v", err))
-		return
-	}
-
 	themeMap := make(map[string]themes.Theme)
-	for _, t := range allThemes {
-		themeMap[t.ID] = t
+	if registry, err := themes.NewRegistry(); err == nil {
+		if allThemes, err := registry.List(); err == nil {
+			for _, t := range allThemes {
+				themeMap[t.ID] = t
+			}
+		}
 	}
 
 	result := make([]ThemeInfo, 0, len(installedIDs))

quickshell/Common/OSDManager.qml

@@ -9,6 +9,20 @@ Singleton {
 
     property var currentOSDsByScreen: ({})
 
+    Connections {
+        target: Quickshell
+        function onScreensChanged() {
+            const activeNames = {};
+            for (let i = 0; i < Quickshell.screens.length; i++)
+                activeNames[Quickshell.screens[i].name] = true;
+            for (const screenName in osdManager.currentOSDsByScreen) {
+                if (activeNames[screenName])
+                    continue;
+                osdManager.currentOSDsByScreen[screenName] = null;
+            }
+        }
+    }
+
     function showOSD(osd) {
         if (!osd || !osd.screen)
             return;

quickshell/Common/SettingsData.qml

@@ -2210,19 +2210,34 @@ Singleton {
             Theme.reloadCustomThemeVariant();
     }
 
-    function getRegistryThemeMultiVariant(themeId, defaults) {
+    function getRegistryThemeMultiVariant(themeId, defaults, mode) {
         var stored = registryThemeVariants[themeId];
-        if (stored && typeof stored === "object")
-            return stored;
-        return defaults || {};
+        if (!stored || typeof stored !== "object")
+            return defaults || {};
+        if ((stored.dark && typeof stored.dark === "object") || (stored.light && typeof stored.light === "object")) {
+            if (!mode)
+                return stored.dark || stored.light || defaults || {};
+            var modeData = stored[mode];
+            if (modeData && typeof modeData === "object")
+                return modeData;
+            return defaults || {};
+        }
+        return stored;
     }
 
-    function setRegistryThemeMultiVariant(themeId, flavor, accent) {
+    function setRegistryThemeMultiVariant(themeId, flavor, accent, mode) {
         var variants = JSON.parse(JSON.stringify(registryThemeVariants));
-        variants[themeId] = {
-            flavor: flavor,
-            accent: accent
-        };
+        var existing = variants[themeId];
+        var perMode = {};
+        if (existing && typeof existing === "object") {
+            if ((existing.dark && typeof existing.dark === "object") || (existing.light && typeof existing.light === "object")) {
+                perMode = existing;
+            } else if (typeof existing.flavor === "string") {
+                perMode.dark = {flavor: existing.flavor, accent: existing.accent || ""};
+            }
+        }
+        perMode[mode || "dark"] = {flavor: flavor, accent: accent};
+        variants[themeId] = perMode;
         registryThemeVariants = variants;
         saveSettings();
         if (typeof Theme !== "undefined")

quickshell/Common/Theme.qml

@@ -971,7 +971,7 @@ Singleton {
             if (themeData.variants.type === "multi" && themeData.variants.flavors && themeData.variants.accents) {
                 const defaults = themeData.variants.defaults || {};
                 const modeDefaults = defaults[colorMode] || defaults.dark || {};
-                const stored = typeof SettingsData !== "undefined" ? SettingsData.getRegistryThemeMultiVariant(themeId, modeDefaults) : modeDefaults;
+                const stored = typeof SettingsData !== "undefined" ? SettingsData.getRegistryThemeMultiVariant(themeId, modeDefaults, colorMode) : modeDefaults;
                 var flavorId = stored.flavor || modeDefaults.flavor || "";
                 const accentId = stored.accent || modeDefaults.accent || "";
                 var flavor = findVariant(themeData.variants.flavors, flavorId);
@@ -1365,8 +1365,8 @@ Singleton {
                         const defaults = customThemeRawData.variants.defaults || {};
                         const darkDefaults = defaults.dark || {};
                         const lightDefaults = defaults.light || defaults.dark || {};
-                        const storedDark = typeof SettingsData !== "undefined" ? SettingsData.getRegistryThemeMultiVariant(themeId, darkDefaults) : darkDefaults;
-                        const storedLight = typeof SettingsData !== "undefined" ? SettingsData.getRegistryThemeMultiVariant(themeId, lightDefaults) : lightDefaults;
+                        const storedDark = typeof SettingsData !== "undefined" ? SettingsData.getRegistryThemeMultiVariant(themeId, darkDefaults, "dark") : darkDefaults;
+                        const storedLight = typeof SettingsData !== "undefined" ? SettingsData.getRegistryThemeMultiVariant(themeId, lightDefaults, "light") : lightDefaults;
                         const darkFlavorId = storedDark.flavor || darkDefaults.flavor || "";
                         const lightFlavorId = storedLight.flavor || lightDefaults.flavor || "";
                         const accentId = storedDark.accent || darkDefaults.accent || "";

quickshell/Modules/OSD/MediaPlaybackOSD.qml

@@ -16,18 +16,28 @@ DankOSD {
     autoHideInterval: 3000
     enableMouseInteraction: true
 
-    function getPlaybackIcon() {
-        if (!player)
-            return "music_note";
+    property string _displayIcon: "music_note"
+
+    function updatePlaybackIcon() {
+        if (!player) {
+            _displayIcon = "music_note";
+            iconDebounce.stop();
+            return;
+        }
+        let icon = "music_note";
         switch (player.playbackState) {
         case MprisPlaybackState.Playing:
-            return "play_arrow";
+            icon = "pause";
+            break;
         case MprisPlaybackState.Paused:
         case MprisPlaybackState.Stopped:
-            return "pause";
-        default:
-            return "music_note";
+            icon = "play_arrow";
+            break;
         }
+        if (icon === _displayIcon)
+            return;
+        iconDebounce.pendingIcon = icon;
+        iconDebounce.restart();
     }
 
     function togglePlaying() {
@@ -38,6 +48,13 @@ DankOSD {
 
     property bool _pendingShow: false
 
+    Timer {
+        id: iconDebounce
+        interval: 150
+        property string pendingIcon: "music_note"
+        onTriggered: root._displayIcon = pendingIcon
+    }
+
     Image {
         id: artPreloader
         source: TrackArtService._bgArtSource
@@ -86,6 +103,7 @@ DankOSD {
             if (!SettingsData.osdMediaPlaybackEnabled)
                 return;
 
+            root.updatePlaybackIcon();
             TrackArtService.loadArtwork(player.trackArtUrl);
 
             if (!player.trackArtUrl || player.trackArtUrl === "") {
@@ -202,7 +220,7 @@ DankOSD {
 
                 DankIcon {
                     anchors.centerIn: parent
-                    name: getPlaybackIcon()
+                    name: root._displayIcon
                     size: Theme.iconSize
                     color: playPauseButton.containsMouse ? Theme.primary : Theme.surfaceText
                 }
@@ -272,7 +290,7 @@ DankOSD {
 
                 DankIcon {
                     anchors.centerIn: parent
-                    name: getPlaybackIcon()
+                    name: root._displayIcon
                     size: Theme.iconSize
                     color: playPauseButtonVert.containsMouse ? Theme.primary : Theme.surfaceText
                 }

quickshell/Modules/Settings/ThemeColorsTab.qml

@@ -777,13 +777,26 @@ Item {
                                     return {};
                                 return activeThemeVariants.defaults[colorMode] || activeThemeVariants.defaults.dark || {};
                             }
-                            property var storedMulti: activeThemeId ? SettingsData.getRegistryThemeMultiVariant(activeThemeId, multiDefaults) : multiDefaults
-                            property string selectedFlavor: storedMulti.flavor || multiDefaults.flavor || ""
+                            property var storedMulti: activeThemeId ? SettingsData.getRegistryThemeMultiVariant(activeThemeId, multiDefaults, colorMode) : multiDefaults
+                            property string selectedFlavor: {
+                                var sf = storedMulti.flavor || multiDefaults.flavor || "";
+                                for (var i = 0; i < flavorOptions.length; i++) {
+                                    if (flavorOptions[i].id === sf)
+                                        return sf;
+                                }
+                                if (flavorOptions.length > 0)
+                                    return flavorOptions[0].id;
+                                return sf;
+                            }
                             property string selectedAccent: storedMulti.accent || multiDefaults.accent || ""
                             property var flavorOptions: {
                                 if (!isMultiVariant || !activeThemeVariants?.flavors)
                                     return [];
-                                return activeThemeVariants.flavors.filter(f => f.mode === colorMode || f.mode === "both");
+                                return activeThemeVariants.flavors.filter(f => {
+                                    if (f.mode)
+                                        return f.mode === colorMode || f.mode === "both";
+                                    return !!f[colorMode];
+                                });
                             }
                             property var flavorNames: flavorOptions.map(f => f.name)
                             property int flavorIndex: {
@@ -818,9 +831,12 @@ Item {
                                 DankButtonGroup {
                                     id: flavorButtonGroup
                                     anchors.horizontalCenter: parent.horizontalCenter
-                                    buttonPadding: parent.width < 400 ? Theme.spacingS : Theme.spacingL
-                                    minButtonWidth: parent.width < 400 ? 44 : 64
-                                    textSize: parent.width < 400 ? Theme.fontSizeSmall : Theme.fontSizeMedium
+                                    property int _count: variantSelector.flavorNames.length
+                                    property real _maxPerItem: _count > 1 ? (parent.width - (_count - 1) * spacing) / _count : parent.width
+                                    buttonPadding: _maxPerItem < 55 ? Theme.spacingXS : (_maxPerItem < 75 ? Theme.spacingS : Theme.spacingL)
+                                    minButtonWidth: Math.min(_maxPerItem < 55 ? 28 : (_maxPerItem < 75 ? 44 : 64), Math.max(28, Math.floor(_maxPerItem)))
+                                    textSize: _maxPerItem < 55 ? Theme.fontSizeSmall - 2 : (_maxPerItem < 75 ? Theme.fontSizeSmall : Theme.fontSizeMedium)
+                                    checkEnabled: _maxPerItem >= 55
                                     property int pendingIndex: -1
                                     model: variantSelector.flavorNames
                                     currentIndex: pendingIndex >= 0 ? pendingIndex : variantSelector.flavorIndex
@@ -839,7 +855,7 @@ Item {
                                         if (!flavorId || flavorId === variantSelector.selectedFlavor)
                                             return;
                                         Theme.screenTransition();
-                                        SettingsData.setRegistryThemeMultiVariant(variantSelector.activeThemeId, flavorId, variantSelector.selectedAccent);
+                                        SettingsData.setRegistryThemeMultiVariant(variantSelector.activeThemeId, flavorId, variantSelector.selectedAccent, variantSelector.colorMode);
                                     }
                                 }
                             }
@@ -902,7 +918,7 @@ Item {
                                                     if (parent.isSelected)
                                                         return;
                                                     Theme.screenTransition();
-                                                    SettingsData.setRegistryThemeMultiVariant(variantSelector.activeThemeId, variantSelector.selectedFlavor, parent.accentId);
+                                                    SettingsData.setRegistryThemeMultiVariant(variantSelector.activeThemeId, variantSelector.selectedFlavor, parent.accentId, variantSelector.colorMode);
                                                 }
                                             }
 
@@ -926,9 +942,12 @@ Item {
                                 DankButtonGroup {
                                     id: variantButtonGroup
                                     anchors.horizontalCenter: parent.horizontalCenter
-                                    buttonPadding: parent.width < 400 ? Theme.spacingS : Theme.spacingL
-                                    minButtonWidth: parent.width < 400 ? 44 : 64
-                                    textSize: parent.width < 400 ? Theme.fontSizeSmall : Theme.fontSizeMedium
+                                    property int _count: variantSelector.variantNames.length
+                                    property real _maxPerItem: _count > 1 ? (parent.width - (_count - 1) * spacing) / _count : parent.width
+                                    buttonPadding: _maxPerItem < 55 ? Theme.spacingXS : (_maxPerItem < 75 ? Theme.spacingS : Theme.spacingL)
+                                    minButtonWidth: Math.min(_maxPerItem < 55 ? 28 : (_maxPerItem < 75 ? 44 : 64), Math.max(28, Math.floor(_maxPerItem)))
+                                    textSize: _maxPerItem < 55 ? Theme.fontSizeSmall - 2 : (_maxPerItem < 75 ? Theme.fontSizeSmall : Theme.fontSizeMedium)
+                                    checkEnabled: _maxPerItem >= 55
                                     property int pendingIndex: -1
                                     model: variantSelector.variantNames
                                     currentIndex: pendingIndex >= 0 ? pendingIndex : variantSelector.selectedIndex

quickshell/Widgets/DankOSD.qml

@@ -66,6 +66,29 @@ PanelWindow {
 
     screen: modelData
     visible: false
+
+    Connections {
+        target: Quickshell
+        function onScreensChanged() {
+            if (!root.visible && !root.shouldBeVisible)
+                return;
+            const currentScreenName = root.screen?.name;
+            if (!currentScreenName) {
+                root.hide();
+                return;
+            }
+            for (let i = 0; i < Quickshell.screens.length; i++) {
+                if (Quickshell.screens[i].name === currentScreenName)
+                    return;
+            }
+            root.shouldBeVisible = false;
+            root.visible = false;
+            hideTimer.stop();
+            closeTimer.stop();
+            osdHidden();
+        }
+    }
+
     WlrLayershell.layer: WlrLayershell.Overlay
     WlrLayershell.exclusiveZone: -1
     WlrLayershell.keyboardFocus: WlrKeyboardFocus.None