upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-06-12 02:00:51 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 33

fix: #57282: icon color mismatch on download button in public share

Browse source 
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 <rodrigo.mendes.correia@tecnico.ulisboa.pt>
This commit is contained in:
Rodrigo Mendes Correia 2026-03-23 14:40:48 +00:00 committed by Ferdinand Thiessen
parent 728644d647
commit b7ebec6304
No known key found for this signature in database
GPG key ID: 7E849AE05218500F
1 changed files with 17 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
core/src/views/PublicPageMenu.vue
View file

@ -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);
}
</style>