Skip to content

fix(CustomCatalog): adapt MetricsDiv text color for dark mode#1648

Open
sahillpaul wants to merge 3 commits into
layer5io:masterfrom
sahillpaul:fix-metrics-dark-mode
Open

fix(CustomCatalog): adapt MetricsDiv text color for dark mode#1648
sahillpaul wants to merge 3 commits into
layer5io:masterfrom
sahillpaul:fix-metrics-dark-mode

Conversation

@sahillpaul

Copy link
Copy Markdown

Removed hardcoded rgba(26, 26, 26, .8) color and replaced it with theme.palette.text.default to ensure accessibility contrast when dark mode is toggled.

Notes for Reviewers
This resolves a critical WCAG accessibility contrast bug. Previously, the metrics text on the CustomCatalogCard became completely unreadable against the dark teal background when the application was toggled into Dark Mode. The MetricsDiv component now fully respects the Sistent theme contract.

This PR fixes #1647

Signed commits

  • Yes, I signed my commits.

Removed hardcoded rgba color and replaced with theme.palette.text.default to ensure accessibility contrast when dark mode is toggled.

Signed-off-by: sahillpaul <sahilpaul046@gmail.com>

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Code Review

This pull request updates the MetricsDiv styled component in style.tsx to use the theme's default text color instead of a hardcoded RGBA value. The reviewer noted that this color property is redundant because the child components explicitly define their own colors, and suggested removing the property entirely along with the unused theme parameter.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Comment thread src/custom/CustomCatalog/style.tsx Outdated
Comment on lines +183 to +188
export const MetricsDiv = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
gap: '4px',
fontSize: '0.2rem',
color: 'rgba(26, 26, 26, .8)',
color: theme.palette.text.default,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

The color property on MetricsDiv is redundant and has no effect on the rendered UI. This is because both of its children explicitly define their own colors:

  • Icon has an explicit fill prop: fill={theme.palette.mode === 'light' ? DARK_TEAL : SNOW_WHITE}.
  • MetricsCount has an explicit color styled property: color: theme.palette.mode === 'light' ? DARK_TEAL : SNOW_WHITE}.

To keep the codebase clean and avoid misleading future developers, we should remove the redundant color property and the unused theme parameter.

Suggested change
export const MetricsDiv = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
gap: '4px',
fontSize: '0.2rem',
color: 'rgba(26, 26, 26, .8)',
color: theme.palette.text.default,
export const MetricsDiv = styled('div')(() => ({
display: 'flex',
alignItems: 'center',
gap: '4px',
fontSize: '0.2rem',

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] CustomCatalogCard metrics text is invisible in Dark Mode

1 participant