Skip to content

fix(core): improve app icon contrast in the app menu - #62931

Open
pringelmann wants to merge 2 commits into
masterfrom
fix/62728/app-icon-contrast
Open

fix(core): improve app icon contrast in the app menu#62931
pringelmann wants to merge 2 commits into
masterfrom
fix/62728/app-icon-contrast

Conversation

@pringelmann

Copy link
Copy Markdown
Contributor

Summary

Before After
image image

App icons in the waffle menu were hard to tell apart, so the colours are flipped: pale primary tint for the circle, saturated primary for the glyph. Shine and drop shadow are gone, circle and glyph are slightly bigger, and the circle scales on hover.

-> Preview link <-

The glyph is painted through a CSS mask. App icons ship a hardcoded fill, so currentColor never applies and the old filter: invert() could only flip black and white, which is why an arbitrary theme color wasn't possible before.

Examples:

Light Dark
image image
image image
image image
image image

Dark themes get no bevel. Their circle sits too close to black to darken any further, and mixing toward the primary brightened it into a glow instead.

New accessibility tests rebuild the lightest stop of both gradients and hold the contrast at 3:1 across default, dark and both high-contrast themes.

Other changes

AppIcon is shared with unified search results, so app results there change too:

image

Checklist

AI (if applicable)

  • The content of this PR was partly or fully generated using AI (fiddly CSS, accessibility tests)

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
@pringelmann pringelmann added this to the Nextcloud 35 milestone Aug 5, 2026
@pringelmann pringelmann self-assigned this Aug 5, 2026
@pringelmann
pringelmann requested review from a team as code owners August 5, 2026 10:46
@pringelmann pringelmann added enhancement design Design, UI, UX, etc. 3. to review Waiting for reviews labels Aug 5, 2026
@pringelmann
pringelmann requested review from kristian-zendato, skjnldsv and sorbaugh and removed request for a team August 5, 2026 10:46
@pringelmann
pringelmann requested review from Altahrim, leftybournes and salmart-dev and removed request for a team August 5, 2026 10:46
@pringelmann

Copy link
Copy Markdown
Contributor Author

/backport to stable34

@pringelmann
pringelmann requested review from artonge, kra-mo and susnux and removed request for Altahrim, salmart-dev and sorbaugh August 5, 2026 10:56
Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve contrast of app icons

3 participants