Dark Mode Hover Causes Poor Text Visibility on Cards

[alenalex-009]

🐞 Description

While using dark mode, hovering over cards causes the background to become too bright, making the text difficult to read due to low contrast.

This also affects the "Why OpenSource Compass?" section where text visibility is reduced in dark mode.

🧪 Steps to Reproduce

1. Enable Dark Mode.
2. Navigate to the Guides section.
3. Hover over any card.
4. Observe that the background becomes very bright.
5. Notice that the text becomes difficult to read.

❗ Expected Behavior

• Hover state should maintain proper contrast.
• Text should remain clearly readable.
• Dark mode styling should not reduce accessibility.

⚠️ Actual Behavior

• Background becomes too bright on hover.
• Text blends into background.
• Poor readability in dark theme.

💡 Suggested Fix

• Adjust hover background color in dark mode.
• Improve text contrast.
• Ensure accessibility compliance.

🚀 SWOC

This issue is reported under Social Winter of Code (SWOC).

I would like to work on this issue under SWOC. Kindly assign it to me.

[github-actions]

Thanks @alenalex-009! 👋
Your issue is important — maintainers will take a look soon.

Before contributing, please note:
🔹 Make sure you check #23 – Important Contributing Guidelines for OpenSource Compass
🔹 PRs should be raised only after the issue is assigned