Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Bug] CustomCatalogCard metrics text is invisible in Dark Mode

Aperta
#1,647 2 commenti 0 reazioni 1 assegnatario Vedi su GitHub

@MAYANKSHARMA01010 ci sta già lavorando.

Dal 24/8/2026.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

kind/bug
Current Behavior

While auditing the CustomCatalogCard component for accessibility and theme compliance, I found that the metrics text (downloads, views, clones) at the bottom of the card becomes nearly invisible when the Meshery dashboard is toggled to Dark Mode.

The root cause is in src/custom/CustomCatalog/style.tsx. The MetricsDiv styled component hardcodes the text color to rgba(26, 26, 26, .8) without any theme awareness. Because the parent container (MetricsContainerFront) correctly switches its background to a dark teal in Dark Mode, this hardcoded near-black text fails WCAG contrast standards and becomes unreadable.

Expected Behavior

The metric text color should adapt dynamically to the active theme mode. Instead of a hardcoded RGBA string, it should utilize Sistent's theme tokens (specifically theme.palette.text.default), ensuring high contrast and readability against both the light and dark background states.

Screenshots/Logs

(I have attached the visual regression report showing the contrast failure in dark mode). ### Environment

  • OS: Windows
  • Environment: Local Development
  • Browser: Chrome / Edge
  • Component: Sistent CustomCatalogCard (MetricsDiv)
To Reproduce
  1. Start the Meshery UI or Sistent Storybook locally.
  2. Navigate to the Catalog page (or view CustomCatalogCard in Storybook).
  3. Toggle the application theme to Dark Mode.
  4. Scroll down to the bottom footer of any Catalog Card.
  5. Observe the text color of the metrics (Downloads, Views) blending into the dark background.
Contributor Guides and Resources

Sistent_Bug_Report_MetricsDiv.pdf

Lingua principale
TypeScript
Stelle
137
Fork
239
Merge medio
4g 14h
PR unite (30g)
5

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di layer5io/sistent

Tutte le issue di layer5io/sistent

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.