Skip to content

make table bg color dynamic as per theme #6673

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

krVatsal
Copy link

@krVatsal krVatsal commented Aug 1, 2025

Description

Fixes #6634
This PR fixes the table background color in the Backdrop component guidance page to be theme aware. Previously, the table had a hardcoded dark background color (#121212) that didn't adapt to the light theme mode.

Changes Made:

  • Added useStyledDarkMode hook to detect current theme
  • Updated table row background colors to be conditional:
    • Dark mode: #121212 (existing dark gray)
    • Light mode: White
  • Applied the theme-aware styling to both table header and all table body rows

Notes for Reviewers

  • The implementation follows the existing pattern used in other Sistent components
  • Only minimal changes were made to maintain consistency with the codebase
  • The table now properly adapts to both light and dark themes
  • All other functionality and styling remains unchanged

Testing:

  • Verified table displays correctly in light mode with #f2f2e8 background
  • Verified table displays correctly in dark mode with #121212 background
  • Confirmed theme switching works properly
  • No other functionality affected

Signed commits

  • Yes, I signed my commits.

@l5io
Copy link
Contributor

l5io commented Aug 1, 2025

🚀 Preview for commit 5a18a0b at: https://688cd524336ce2b82b243b85--layer5.netlify.app

@vr-varad
Copy link
Contributor

vr-varad commented Aug 4, 2025

Thank you for your contribution!
Let's discuss this during the website call today at 5:30 PM IST | 7 AM CT

Add it as an agenda item to the meeting minutes, if you would :)

@vr-varad
Copy link
Contributor

vr-varad commented Aug 5, 2025

@krVatsal Looks good to me.
Could you mind fixing the dco error https://github.com/layer5io/layer5/pull/6673/checks?check_run_id=47459414413
otherwise its good to merge.

@l5io
Copy link
Contributor

l5io commented Aug 5, 2025

🚀 Preview for commit 4ebd70e at: https://68927eabff8c70265b694cc5--layer5.netlify.app

@krVatsal
Copy link
Author

krVatsal commented Aug 6, 2025

@vr-varad can you share the doc which we were discussing in meet to fix this DCO issue, as the commit is already signed and i have also tried amending the commit

@l5io
Copy link
Contributor

l5io commented Aug 7, 2025

🚀 Preview for commit 18033c8 at: https://6895045847e2040da4ee0d68--layer5.netlify.app

@krVatsal krVatsal force-pushed the fix/table-bg-as-per-theme branch from 18033c8 to 73780da Compare August 8, 2025 04:34
@l5io
Copy link
Contributor

l5io commented Aug 8, 2025

🚀 Preview for commit 73780da at: https://689581583034d43b607ca88f--layer5.netlify.app

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.

[Bug] Table Text Invisible in Dark Mode on Backdrop Guidance Page
3 participants