fix(ActivityAppNavigation): use correct icon filter for NC34+ active nav items#2627
fix(ActivityAppNavigation): use correct icon filter for NC34+ active nav items#2627miaulalala wants to merge 1 commit into
Conversation
…nav items The NcAppNavigationItem component in @nextcloud/vue 9.8.0 introduced a new active state design for NC34+: active items now use --color-primary-element-light as background with --color-main-text for text, rather than the full primary color with --color-primary-element-text. The icon filter for active items was still using --primary-invert-if-dark, which is intended for icons on a full primary-colored background. On NC34+ this results in dark/invisible icons in dark mode. Switch to --background-invert-if-dark for the non-legacy (NC34+) case, keeping --primary-invert-if-dark only for the legacy class applied on NC<34. AI-Assisted-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: Anna Larch <anna@nextcloud.com>
miaulalala
force-pushed
the
fix/nc34-active-nav-icon-color
branch
from
e25dce6 to
757cc2b
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
|
One thing we probably 8still) can't do (no judgment) is the active state icon switching given apps plug into the sidebar, so we face the same issue we have in files? |
Unsure what you mean 😁 is the fix also needed in server? |
click on the side bar items in the contacts app and you see the icons changing
Yes, but I can't tell if the solution would be the same for both. Yet not in scope for this PR. |
|
@miaulalala this is what I am referring to: nextcloud-libraries/nextcloud-vue#7273 |
ah I see, let me check on monday what my fix actually looks like |
2 participants
Summary
NcAppNavigationItemcomponent in@nextcloud/vue9.8.0 introduced a new active state design for NC34+: active items now use--color-primary-element-lightas background with--color-main-textfor text, rather than the full primary colour with--color-primary-element-text--primary-invert-if-dark, which is designed for icons on a full primary-coloured background — in dark mode on NC34+ this renders the icon dark/invisible--background-invert-if-darkfor the non-legacy (NC34+) case, keeping--primary-invert-if-darkonly for the.app-navigation-entry--legacyclass applied on NC<34Also added in #2625 for NC34.
Test plan
🤖 Generated with Claude Code