Skip to content

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

Merged
pringelmann merged 2 commits into
masterfrom
fix/62728/app-icon-contrast
Aug 6, 2026
Merged

fix(core): improve app icon contrast in the app menu#62931
pringelmann merged 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>

@jancborchardt jancborchardt left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks really nice, and super nice little animation effect. Much easier to distinguish the icons now. :)

@jancborchardt jancborchardt moved this to 🏗️ At engineering in 🖍 Design team Aug 6, 2026
@pringelmann
pringelmann merged commit 4999cd8 into master Aug 6, 2026
199 of 202 checks passed
@pringelmann
pringelmann deleted the fix/62728/app-icon-contrast branch August 6, 2026 09:30
@github-project-automation github-project-automation Bot moved this from 🏗️ At engineering to 🎉 Done in 🖍 Design team Aug 6, 2026
@backportbot

backportbot Bot commented Aug 6, 2026

Copy link
Copy Markdown

The backport to stable34 failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout stable34
git pull origin stable34

# Create the new backport branch
git checkout -b backport/62931/stable34

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts, resolve them
git cherry-pick 5f93c677 eea37c94

# Push the cherry pick commit to the remote repository and open a pull request
git push origin backport/62931/stable34

Error: Failed to check for changes with origin/stable34: No changes found in backport branch


Learn more about backports at https://docs.nextcloud.com/server/stable/go.php?to=developer-backports.

@jancborchardt jancborchardt added the papercut Annoying recurring UX issue with possibly simple fix. label Aug 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

3. to review Waiting for reviews backport-request design Design, UI, UX, etc. enhancement feature: apps management papercut Annoying recurring UX issue with possibly simple fix.

Projects

Status: 🎉 Done

Development

Successfully merging this pull request may close these issues.

Improve contrast of app icons

5 participants