Fix: blog article title disappearing on hover in dark mode #44
Conversation
WalkthroughThis PR addresses dark mode visibility issues in the blog card component by restructuring how the hover gradient effect is applied to the title and adding comprehensive dark mode styling across the card, along with adding the next-themes dependency for theme management. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
components/blog-card.tsx(2 hunks)package.json(1 hunks)
🔇 Additional comments (2)
components/blog-card.tsx (2)
22-22:border-gradient-to-rmay be a no-op Tailwind class (unless custom)
If you’re expecting a gradient border here, Tailwind doesn’t provideborder-gradient-to-rby default; consider implementing viabg-gradient-*+p-[1px]wrapper /bg-clip-paddingpattern (or confirm you have a custom plugin).
47-52: Hover title should now stay readable in dark mode — please add before/after screenshots to close #29
The “gradient on hover” being scoped to the inner<span>plusdark:group-hover:bg-none/dark:group-hover:text-[#91A511]looks like it prevents the title from becoming effectively invisible in dark mode. Please verify and attach screenshots for: light+hover, light+rest, dark+hover, dark+rest (as requested in the linked issue).Also applies to: 54-57
| "lucide-react": "^0.454.0", | ||
| "next": "15.2.4", | ||
| "next-mdx-remote": "^5.0.0", | ||
| "next-themes": "^0.4.6", |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
next-themes 0.4.6 React 19 Next.js 15 compatibility
💡 Result:
Short answer: Yes — next-themes@0.4.6 declares React 19 (including the RC) in its peerDependencies and is compatible with Next.js 15, but you may still encounter peer-dependency install conflicts from other packages in your project.
Evidence:
- next-themes 0.4.6 on npm (release info). [1]
- A package-lock snapshot showing next-themes@0.4.6 peerDependencies include react/react-dom "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc". [2]
- Next.js 15 requires/targets React 19 for the App Router (Next.js 15 docs/blog). [3]
Practical notes:
- If npm fails with ERESOLVE because other deps still require React ^18, either use npm install --legacy-peer-deps (or --force), add package overrides to align react/react-dom versions, or keep React 18 / Pages Router until all third‑party deps are updated. See Next.js upgrade docs for guidance. [3]
Sources:
[1] npm package page — next-themes 0.4.6.
[2] package-lock snapshot showing next-themes@0.4.6 peerDependencies.
[3] Next.js 15 docs/blog (React 19 guidance).
🏁 Script executed:
# Search for ThemeProvider usage in the codebase
rg "ThemeProvider" --type ts --type tsx --type js --type jsx -A 3Repository: StabilityNexus/StableViewpoints
Length of output: 102
🏁 Script executed:
# Search for next-themes imports
rg "from.*next-themes|import.*next-themes" --type ts --type tsx --type js --type jsxRepository: StabilityNexus/StableViewpoints
Length of output: 102
🏁 Script executed:
# Find app root/layout files where provider might be configured
fd -e tsx -e ts -e jsx -e js | grep -E "(layout|root|app)" | head -20Repository: StabilityNexus/StableViewpoints
Length of output: 192
🏁 Script executed:
cat -n app/layout.tsx | head -100Repository: StabilityNexus/StableViewpoints
Length of output: 3041
🏁 Script executed:
# Search for ThemeProvider using a simpler grep approach
grep -r "ThemeProvider" app/ 2>/dev/null || echo "No ThemeProvider found"Repository: StabilityNexus/StableViewpoints
Length of output: 97
Wire next-themes into the app—ThemeProvider is not configured
The dependency is compatible with your stack (next-themes@0.4.6 supports React 19 and Next.js 15), but ThemeProvider is missing from app/layout.tsx. Either add the provider wrapping your layout or remove the unused dependency.
🤖 Prompt for AI Agents
In package.json around line 18, next-themes is declared but not wired into the
app: add ThemeProvider from 'next-themes' into app/layout.tsx and wrap your root
layout children with it (or remove the dependency if you don't intend to use
theming). Import ThemeProvider at the top of app/layout.tsx, wrap the returned
JSX so ThemeProvider is the ancestor of your app content, and configure props
you need (e.g., attribute='class', defaultTheme or enableSystem) to ensure CSS
class-based theme switching works.
2 participants
Summary
Fixed an issue where the blog article title became invisible on hover in dark mode.
Root Cause
The hover state applied a text color that blended with the dark background.
Fix
text-white/dark:group-hover:text-white).Issue Reference
Fixes #29
Summary by CodeRabbit
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.