diff --git a/config/dot/quickshell/config/Theme.qml b/config/dot/quickshell/config/Theme.qml index 5ef3337..ab4daa2 100644 --- a/config/dot/quickshell/config/Theme.qml +++ b/config/dot/quickshell/config/Theme.qml @@ -110,6 +110,13 @@ Singleton { // light one, and text on it stops being legible. readonly property real dockAlpha: root.dark ? 0.34 : 0.62 readonly property real popoverAlpha: root.dark ? 0.92 : 0.97 + + // Toasts sit a little lighter than a popover you opened on purpose. A + // notification arrives unbidden over whatever you were doing, and at full + // popover weight it reads as a dialog demanding an answer -- but the 6% + // foreground tint it used to have left the text competing with the desktop + // behind it. This is the point between the two. + readonly property real toastAlpha: root.dark ? 0.86 : 0.94 readonly property real overlayAlpha: root.dark ? 0.55 : 0.40 readonly property real hoverAlpha: root.dark ? 0.14 : 0.10 readonly property real activeAlpha: root.dark ? 0.24 : 0.18 diff --git a/config/dot/quickshell/modules/notifications/NotificationCard.qml b/config/dot/quickshell/modules/notifications/NotificationCard.qml index 1820762..6b1c5f3 100644 --- a/config/dot/quickshell/modules/notifications/NotificationCard.qml +++ b/config/dot/quickshell/modules/notifications/NotificationCard.qml @@ -35,7 +35,17 @@ Rectangle { implicitHeight: Math.max(layout.implicitHeight + 24, image.visible ? 96 : 0) radius: Theme.cardRadius border.width: 0 - color: hover.containsMouse ? Theme.alpha(Theme.fg, 0.1) : Theme.alpha(Theme.fg, 0.06) + // A real popover surface, the same one the date menu and clipboard panel + // use, rather than a 6% foreground tint. + // + // A tint that faint has nothing behind it: the toast window is transparent, + // so the card was sitting directly on whatever happened to be on screen and + // the text competed with it. Notifications are the one surface someone reads + // without having chosen to look at it, so it has to be legible over a + // bright photo and a white document alike. + color: hover.containsMouse + ? Theme.alpha(Theme.mix(Theme.bgPopover, Theme.fg, 0.06), Theme.toastAlpha) + : Theme.alpha(Theme.bgPopover, Theme.toastAlpha) Behavior on color { ColorAnimation {