Fix dark mode article title visibility on hover

[REHAAANNN]

Problem

Article titles become invisible when hovering over article cards in dark mode due to the gradient effect applying text-transparent without proper contrast against the dark background.

Solution

Added comprehensive dark mode styling to blog-card.tsx:

• Card background: dark:bg-gray-800 - provides proper dark background
• Title text: dark:text-gray-100 - ensures visibility before hover
• Excerpt text: dark:text-gray-300 - maintains readability
• Metadata text: dark:text-gray-400 - appropriate contrast for author info

Result

✅ Article titles now remain visible in dark mode
✅ Green gradient hover effect works correctly on both light and dark backgrounds
✅ Improved user experience for dark mode users

Testing

Tested locally with dark mode enabled - titles are now clearly visible and the hover gradient effect displays properly.

Summary by CodeRabbit

• Style
  • Added complete dark mode styling support to blog cards. Visual enhancements include darker background colors paired with optimized text colors for article titles, excerpts, and author metadata information. These updates improve readability and ensure a consistent appearance when users switch between light and dark display modes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Adds dark mode CSS class variants to the blog-card component styling. The article element and text elements (title, excerpt, metadata) now include Tailwind dark: prefixed classes for dark mode appearance without altering component logic or layout.

Changes

Cohort / File(s)	Change Summary
Dark Mode Styling components/blog-card.tsx	Adds Tailwind dark: class variants to article, heading, excerpt, and metadata elements for dark mode support.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

This is a straightforward styling change affecting a single file with repetitive, homogeneous modifications. All edits follow the same pattern (adding Tailwind dark: prefixed classes) with no logic changes or control flow alterations.

Possibly related PRs

• Card ui changes #9: Both PRs modify components/blog-card.tsx class attributes, though one focuses on layout/flex/rounded changes while this adds dark mode color variants.

Suggested reviewers

• ceilican

Poem

Hop, hop! The blog cards dance in night,
With darker hues and softer light,
Tailwind's dark: prefix guides the way,
Text glows gray both night and day,
A style refresh for weary eyes! 🐰✨

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title references 'article title visibility on hover' but the PR primarily adds dark mode styling to multiple elements (background, title, excerpt, metadata). While hover-related, the title doesn't capture the broader dark mode styling improvements.	Consider revising the title to reflect the main change: 'Add dark mode styling to blog card component' or 'Improve dark mode support in blog-card component'.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 113d28d and cbcaafd.

📒 Files selected for processing (1)

• components/blog-card.tsx (2 hunks)

🔇 Additional comments (3)

components/blog-card.tsx (3)

22-22: LGTM! Proper dark mode background.

The addition of dark:bg-gray-800 provides an appropriate dark background for the article card in dark mode, creating a good foundation for the dark mode styling.

---

51-53: LGTM! Appropriate dark mode text colors.

The dark mode text colors are well-chosen:

• dark:text-gray-300 for the excerpt provides good readability against the dark background
• dark:text-gray-400 for metadata maintains proper visual hierarchy with slightly reduced emphasis

These follow standard Tailwind dark mode patterns and ensure all text remains legible.

---

47-47: Gradient contrast already meets WCAG AA standards—no changes required.

The current gradient colors (#228B22 and #91A511) meet WCAG AA contrast requirements against the dark background. The contrast ratios are 3.34:1 and 5.31:1 respectively, both exceeding the 3:1 threshold for large text (h2). The code's dark:text-gray-100 class also ensures proper text visibility in dark mode. No modifications are necessary.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[KUL236]

"Fix dark mode hover title visibility in blog card" i am from cyber soldiers team the gradient effect applying text-transparent .