feat(react): add dark mode support to UI components (Fixes #18)#19
Conversation
- Update BlogCard, Badge, BlogPlaceholder with dark variant classes - Configure BlogRenderer to use dark mode text and background colors - Ensure all color utilities support standard dark mode inversion
There was a problem hiding this comment.
Pull request overview
This PR adds comprehensive dark mode support to the @haroonwaves/blog-kit-react component library by implementing Tailwind CSS dark mode variants across all UI components. The changes ensure proper visual styling for backgrounds, text colors, borders, and interactive elements when users enable dark mode.
Key Changes:
- Extended all React components with
dark:utility classes for backgrounds, text, borders, and hover states - Added
dark:prose-invertto BlogRenderer for automatic typography color inversion in markdown content - Updated Badge component with dark mode-friendly colors using opacity modifiers
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
BlogRenderer.tsx |
Added dark mode classes to all markdown elements (headings, paragraphs, lists, code, blockquotes, tables, links) and added dark:prose-invert to the prose container |
BlogCard.tsx |
Applied dark mode styling to card borders, text colors for title/description/metadata, and link colors |
BlogPlaceholder.tsx |
Updated skeleton loader backgrounds and borders for dark mode visibility |
BlogList.tsx |
Added dark mode text color to empty state message |
Badge.tsx |
Updated badge colors with dark-friendly orange variants using transparency |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Thanks for the PR! CI is failing at the moment please take a look when you can. Also, you’re the first external contributor to this project, so really appreciate you jumping in. I’ll do a full review once the checks pass. |
|
Fixed the CI failure - the issue was Prettier formatting. I ran 'pnpm format' to apply the correct code style to all 26 files that were flagged. The workflow run needs maintainer approval since I'm a first-time contributor. Once approved, CI should pass now - I've verified locally that 'pnpm check' succeeds (lint + format:check + type-check all pass). |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
If there are any more issues,you'd like me to work on,just assign me,I'd love to be of help. |
Really appreciate you saying that. I’ll assign you more tasks as they come up, thanks again for your support. |
Added dark mode support to all React components in @haroonwaves/blog-kit-react.
Changes
verification
Fixes #18