From 00f0e397af2e3cf44ff2e5fabf611e9f665291df Mon Sep 17 00:00:00 2001 From: Rodrigo Mendes Correia Date: Mon, 23 Mar 2026 14:40:48 +0000 Subject: [PATCH] Fix #57282: icon color mismatch on download button in public share The download button icon on the public share page always appeared in the opposite color of the button text. The root cause was the wrong CSS variable for the filter applied to the icon. Background-image icons are dark (black) by default. In light mode, the icon must be inverted to white when the primary color is dark, which requires --primary-invert-if-dark. The code was incorrectly using --primary-invert-if-bright, inverting in the wrong direction. In dark mode, icons.css swaps the icon variables so that --icon-download-dark resolves to the white SVG. The filter logic must be reversed: --primary-invert-if-bright is needed to invert the white icon to black when the primary color is bright. Fix by using --primary-invert-if-dark in light mode and --primary-invert-if-bright in dark mode, handling both the prefers-color-scheme media query and the Nextcloud data-themes attribute for explicit theme selection. Signed-off-by: Rodrigo Mendes Correia --- core/src/views/PublicPageMenu.vue | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/core/src/views/PublicPageMenu.vue b/core/src/views/PublicPageMenu.vue index ddadfb63bc053..19cf8d5690b9d 100644 --- a/core/src/views/PublicPageMenu.vue +++ b/core/src/views/PublicPageMenu.vue @@ -135,7 +135,23 @@ function openDialogIfNeeded() { } &__primary-icon { - filter: var(--primary-invert-if-bright); + // Light mode: icon is black by default, invert to white when primary is dark + filter: var(--primary-invert-if-dark); + + // Dark mode: icon is white (swapped in icons.css), invert to black when primary is bright + @media (prefers-color-scheme: dark) { + filter: var(--primary-invert-if-bright); + } } } + +// Dark theme via Nextcloud setting (data-themes attribute, not media query) +:global([data-themes*=dark]) .public-page-menu__primary-icon { + filter: var(--primary-invert-if-bright); +} + +// Light theme explicitly set (overrides dark media query if system is dark but user chose light) +:global([data-themes*=light]) .public-page-menu__primary-icon { + filter: var(--primary-invert-if-dark); +}