Skip to content

fix: improve integration logo visibility in dark and light mode#7706

Open
AnkitRewar11 wants to merge 1 commit into
layer5io:masterfrom
AnkitRewar11:fix/dark-mode-integration-logos
Open

fix: improve integration logo visibility in dark and light mode#7706
AnkitRewar11 wants to merge 1 commit into
layer5io:masterfrom
AnkitRewar11:fix/dark-mode-integration-logos

Conversation

@AnkitRewar11
Copy link
Copy Markdown
Contributor

Description

Fixes #7676

This PR fixes integration logo visibility issues in both dark mode and light mode on the Meshery integrations page.

Changes Made

  • IntegrationsGrid.js: Fixed incorrect darkModeIntegrationIcon reference that was pointing to color icon instead of white icon
  • Aerospike: Fixed white SVG where fill color was #1A1A1A (dark) instead of #FFFFFF (white), causing invisibility in dark mode
  • Solr: Removed invalid sodipodi:namedview tags from both color and white SVGs that were causing rendering issues in dark mode
  • Ngrok: Fixed empty clipPath in color SVG that was hiding the logo in light mode, and updated fill color to #006AFF
  • Vald: White SVG was completely empty, created proper white SVG paths so logo renders in dark mode
  • Rustrial AWS EKS IAM Auth Controller: Both color and white SVG files were empty, created placeholder SVGs

Notes for Reviewers

  • Light mode logos retain their original colors
  • Dark mode logos now properly show white versions
  • No breaking changes

Signed commits

  • Yes, I signed my commits.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 6, 2026

Preview deployment for PR #7706 removed.

This PR preview was automatically pruned because we keep only the 6 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.

@AnkitRewar11 AnkitRewar11 force-pushed the fix/dark-mode-integration-logos branch from 1d3022a to 719f704 Compare May 8, 2026 07:14
@rishiraj38
Copy link
Copy Markdown
Member

@AnkitRewar11, could you please make a commit so the preview can be built?

Copy link
Copy Markdown
Member

@rishiraj38 rishiraj38 left a comment

Choose a reason for hiding this comment

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

src/collections/integrations/rustrial-aws-eks-iam-auth-controller/icons/color/rustrial-aws-eks-iam-auth-controller-color.svg.

src/collections/integrations/rustrial-aws-eks-iam-auth-controller/icons/white/rustrial-aws-eks-iam-auth-controller-white.svg.

src/collections/integrations/solr-operator/icons/white/solr-operator-white.svg.

src/collections/integrations/vald/icons/white/vald-white.svg

Please fix these images they are showing some errors

@Bhumikagarggg
Copy link
Copy Markdown
Contributor

@AnkitRewar11 Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

@AnkitRewar11 AnkitRewar11 force-pushed the fix/dark-mode-integration-logos branch from 6456dfe to b4242f7 Compare May 11, 2026 10:16
- Fix darkModeIntegrationIcon reference in IntegrationsGrid.js
- Fix Aerospike white SVG color from dark to white
- Fix Solr SVG by removing invalid sodipodi tags
- Fix Ngrok color SVG empty clipPath and update fill color
- Fix Vald empty white SVG with proper white paths
- Fix Rustrial AWS EKS empty SVG files with placeholder icons

Signed-off-by: ankitrewar11 <ankitrewar11@gmail.com>
@AnkitRewar11 AnkitRewar11 force-pushed the fix/dark-mode-integration-logos branch from b4242f7 to 8281237 Compare May 11, 2026 10:55
@AnkitRewar11
Copy link
Copy Markdown
Contributor Author

AnkitRewar11 commented May 11, 2026

Hi @rishiraj38,

Thank you for the review! I have addressed all the reported issues. Regarding the integration page issue is only showing up in the preview. When I build it locally, everything works normally on my side. That’s why I feel something might be wrong with the preview environment, because locally I’m not able to reproduce the issue. And as you can see, I only added one class name for darkMode in the code everything else is unchanged.

Please let me know if any further changes are needed.

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.

Integration logos have low contrast / not visible in dark mode

3 participants