Fix: Support light mode visibility for Integrations honeycomb grid#7532
Fix: Support light mode visibility for Integrations honeycomb grid#7532JayH25 wants to merge 1 commit intolayer5io:masterfrom
Conversation
Signed-off-by: JayH25 <jayhirapara2506@gmail.com>
|
🚀 Preview for commit a6b42bf at: https://69be5a3bfd0be612de3cee83--layer5.netlify.app |
| display: flex; | ||
| height: 100%; | ||
| background: ${(props) => props.theme.radialToBlue}; | ||
| background: ${(props) => props.theme.grey212121ToWhite}; |
There was a problem hiding this comment.
updated this variable because the previous one (radialToBlue) was causing the background behind the grid to stay dark when toggled to black mode, which made the logos and text hard to see.
Switching it to grey...ToWhite fixed the issue by keeping it dark in dark mode, but properly changing to a white/light background in light mode.
If you want to keep it as it is then let me know!
Can you just watch the preview and on website and compare?
If you want then let me know!
There was a problem hiding this comment.
you can see that in dark mode, one of the integretions hexagon is getting disappeared
if you say then i would revert that as the primary goal of this pr is to resolve this incompatibility with light mode.
3 participants
Description
This PR resolves the visibility issue in the Integrations honeycomb grid when the site is toggled to light mode. The root cause was that the background colors were hardcoded to a dark grey, making the text and logos unreadable when the site background turned white.
Changes Made
Integration.style.js: Removed the oldprops.theme.radialToBlueand updated the styling to useprops.theme.grey212121ToWhiteto properly support the light/dark mode switch.IntegrationsGrid.js: The inactive<Hexagon>components previously used a hardcoded inline style (background: "#A0AAAA"). I replaced this with a conditional check (isDark ? "#A0AAAA" : "#EEEEEE") so the colors now dynamically adapt whenever the theme is toggled.This PR fixes issue: #7530